nodejs+webpack+vue之vue
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>
