1、现如今的前端，一提到vue、react、angular，大家第一印象就是单页应用。但是连尤雨溪都说过，他从来没说过vue仅适用于单页应用，下面我们就一步一步来实现多页应用
2、全局环境配置和主要使用到的主要开发工具：node、npm、webpack、sass、vue
ps：这里多说一句，sass的安装依赖淘宝镜像会比较容易：
（1） 首先全局环境下配置淘宝镜像（注意:是全局环境，也就是c:\user）
npm install -g cnpm --registry=https://registry.npm.taobao.org
（2） 进入项目根目录，安装node-sass
cnpm install node-sass --save-dev
（3）接下来就可以执行npm install安装依赖项了
npm install
3、如果大家觉得自己配置项目文件比较耗费时间，可以使用vue-cli脚手架工具安装项目基本目录
（1）首先全局环境下配置vue-cli（注意:是全局环境，也就是c:\user）
npm install -g vue-cli
（2）初始化项目
vue init webpack '项目文件夹名称'
（3） 接着就会提示一些项目描述，是否使用单元测试、语法检查等等，实际开发可选yes,demo搭建可忽略
4、整理修改项目初始目录文件
（1）因为是多页面应用 ，所以项目根目录下的index.html实际是无用的
（2）src开发目录
assets: 公用css、js方法、sass方法等
components: 公用组件
module: 开发模块（可以理解为每个页面），建议每个页面，建一个文件夹
module/index: index模块
index.html：容器页面，相当于单页面中的index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>首页</title> </head> <body> <!-- 容器 --> <app></app> </body> </html>
index.vue: 开发文件夹（ps:结构和普通vue文件一样）
img: 用于放置当前页面的图片（就近维护原则）
index.js：将index.vue的内容添加到index.html中
import Vue from 'vue' import App from './index.vue' /* eslint-disable no-new */ new Vue({ el: 'body', components: { App } }) index.scss: 当前样式文件
（3） webpack配置（ps:这里的webpack配置较多，只是说明一些重要的配置）
关键是指定入口文件，这里不再只是main.js，而是循环出的对象或者数组
entry: entries, output: { path: config.build.assetsRoot, publicPath: config.build.assetsPublicPath, filename: '[name].js' }, resolve: { extensions: ['', '.js', '.vue'], fallback: [path.join(__dirname, '../node_modules')], alias: { 'src': path.resolve(__dirname, '../src'), 'assets': path.resolve(__dirname, '../src/assets'), 'components': path.resolve(__dirname, '../src/components'), 'vux-components': 'vux/src/components' } }, 获取entries
var entries = getEntry('./src/module/**/*.js'); function getEntry(globPath) { var entries = {}, basename, tmp, pathname; glob.sync(globPath).forEach(function (entry) { basename = path.basename(entry, path.extname(entry)); tmp = entry.split('/').splice(-3); // 正确输出js路径 pathname = tmp.splice(0, 1) + '/' + basename; entries[pathname] = entry; }); return entries; } 5、配置好后，启动npm run dev,方位localhost:8083/module/index.html即可
在index.vue中为按钮添加“点击跳转”事件
跳转后的页面
6、项目源码 ：https://github.com/chuanzaizai/vue-multi-page
