nodejs+webpack+vue之vue

对着背影说爱祢 提交于 2020-03-07 17:47:24

vue.js 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。vue-cli是vue官方提供的一个命令行工具,vue-cli主要是用于构建单页应用的脚手架。

使用方法:

1、安装vue-cli:npm install -g vue-cli

2、安装webpack-simple模板:vue init webpack-simple 项目名称,如: vue init webpack-simple demo

3、安装项目依赖:npm install

4、执行代码:执行webpack命令,在dist目录下生成build.js文件,执行npm run dev命令,自动启动web服务127.0.0.1:8080

本项目则是基于vue-cli生成的单页应用进行改造成多页面模板。

本项目用到了两个html模板页:index.html、users.html,因此,在webpack.config.js文件里entry节点则有两个入口文件/src/index.js、/src/user.js。

index.html模板,<router-view>把路由匹配到的组件渲染在这里

<body>
    <div id="app">     <!-- 路由匹配到的组件将渲染在这里 -->
        <router-view></router-view>
    </div>
    <script src="/dist/build.index.js"></script>
</body>

index.js入口文件,引入了logon.vue组件,在'/'目录下默认引入该组件。

import Vue from 'vue'
import VueResource  from 'vue-resource'
import VueRouter  from 'vue-router'
import Login from './components/login.vue'
require('./scss/reset.scss')
require('./scss/layout.scss')

Vue.use(VueResource)
Vue.use(VueRouter)

const router= new VueRouter({    
    routes:[
        {path:'/',component:Login}
    ]
});

new Vue({
    router,
    el:'#app'
});

users.html模板,使用 router-link 组件来导航,通过传入 `to` 属性指定链接,<router-link> 默认会被渲染成一个 `<a>` 标签,<router-view>,<router-view>把路由匹配到的组件渲染在这里

<body><div id="app">
    <ul id="nav" class="clearfix">    
        <li><router-link to="/index">首页</router-link></li>    
        <li><router-link to="/userList">报名人员</router-link></li>
    </ul>        
    <div id="banner"></div>      
    <router-view></router-view>
</div><script src="/dist/build.index.js"></script></body>

user.js入口文件,引入了index.vue和userList.vue两个组件,在'/'及'/index'目录下默认引入index.vue组件,在'/userList'目录下默认引入userList.vue组件。

import Vue from 'vue'
import VueResource  from 'vue-resource'
import VueRouter  from 'vue-router'
import Index from './components/index.vue'
import UserList from './components/userList.vue'
require('./scss/reset.scss')
require('./scss/user.scss')

Vue.use(VueResource)
Vue.use(VueRouter)

const router= new VueRouter({    
    routes:[
        {path:'/',component:Index},
        {path:'/index',component:Index},
        {path:'/userList',component:UserList}
    ]
});

new Vue({
    router,
    el:'#app'
});

每个组件下都有各自的js页面效果及数据请求,如:login.vue

<template>
  <div class="login-box">
    <div>
      <p>
        <input type="text" placeholder="手机号" v-model.trim="phone"/>
        <input type="text" placeholder="验证码" v-model="code" readonly="readonly"/>      
      </p>
      <input type="button" value="发送验证码" @click="getCode"/>
    </div>
    <button id="login-btn" @click="loginUser">登 录</button>        
  </div>
</template>

<script>
import {hex_md5} from '../util/md5'
import httpHelper from "../util/httpHelper"
import {setTelPhone} from '../util/cacheManger'

export default {  
  data () {
    return {
      phone: '15365655565',
      code:''     
    }
  },
  methods:{
    getCode(){
      let _self = this;
      let tel = /^[0-9]{11}$/.test(_self.phone)
      if(!tel){
        _self.phone = '手机号不正确';       
        return;
      }
      if(_self.phone){
        let params = {num:_self.phone}        
        httpHelper.get(_self,"getVeryCode",params,(data)=>{
          if(data.body.code<0){
            alert(data.body.description);
            return;            
          }
          _self.code = data.body.data;                                    
        },(err)=>{
            alert("shi bai")
        })
      }      
    },
    loginUser(){
      let _self = this;
      if(_self.phone && _self.code){  
          setTelPhone(_self.phone);        
          window.location.href = '/users.html'; 
      }
    }
  }
}
</script>

 上一篇:nodejs+webpack+vue之node

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!