vue+webpack是否有多页面
目前使用vue来做项目，估计大部分都是单页面（SPA）应用，一个轻型的 MVVM 框架，谁用了MVVM框架，就再也回不去JQ时代了，哈哈。
在手机端的项目，使用vue + vue-router是high到爆，不仅仅是我们开发的而言，最主要的用户体检也是开足马力，体检感杠杠的。
那问题来了，使用vue+webpack的单页面是爽到爆，那如果是多页面也能不能high到爆呢？那当然呀，必须的必，vue、webpack的忠粉（哈哈，好像这忠粉不关系到多页面的）。
在谷歌找vue 多页面，实例还是比较少，功夫不负有心人，在yaoyao1987那找到了，具体可以到这个yaoyao1987 github，非常感谢yaoyao1987童鞋，今天要讲的内容是基于yaoyao1987童鞋的多页面实例上再优化的。
优化了点啥
github地址：https://github.com/bluefox1688/vue-cli-multi-page
优化的内容
我们先来讲讲，具体我们优化了什么内容。
增加全局统一使用的模块Lib.js库，可能这里看不明白，不要紧，后面会讲到。
支持字体图标
增加干净的页面、组件的模板，复制即可以使用。
去掉多余的代码注释，坑了我的注释，别再坑人了
构建时，增加对css打包的支持
提取公共模块........
使用方法
# 安装 npm install # 调试环境 serve with hot reload at :8083/module/login.html npm run dev # 生产环境 build for production with minification npm run build
本地默认访问端口为8083，需要更改的童鞋请到项目根目录文件config.js修改。
目录结构
webpack |---build |---src |---assets 资源 |---css.css css |---img 图片文件 |---font/ 字体图标 |---components 组件 |---Button.vue 按钮组件 |---module-head.vue head组件 |---module各个页面模块 |---login 登陆模块 |---login.html |---login.js |---app.vue |---welcome 欢迎页模块 |---welcome.html |---welcome.js |---app.vue
从目录结构上，各种组件、页面模块、资源等都按类新建了文件夹，方便我们储存文件。
其实我们所有的文件，最主要都是放在module文件夹里，以文件夹名为html的名称。
例如
|---login 登陆模块 |---login.html |---login.js |---app.vue
就是我们访问时的地址：:8083/module/login.html
这里一定要记住，在module里下级文件夹，一个文件夹就是一个html，js、vue template 都统一放在当前文件夹里，当然你也可以继续放其他的资源，例如css、图片等，webpack会打包到当前页面里。
如果项目不需要这个页面了，可以直接把这个文件夹直接删除掉，干净项目，干活也开心。
像以前我们传统开发项目，所有的图片都习惯放在images里，当项目有改动时，有些图片等资源用不上了，但还占着坑位，虽
然现在的硬件容量大到惊人，但我们应该还是要养到一个良好的习惯。
当前页面的开发在app.vue里，打开后你就会看到很熟悉的<template>、<script>、<style scoped>了。
全局统一公共模块
我们做多页面开发，那肯定会涉及到全局都能调用的公共库，或者是把别人封装的库也一起打包在全局公共模块里。
如果看过源码的童鞋，在*.vue页面里，我都统一import了一个文件
import Lib from 'assets/Lib.js'
这就是全局统一公共模块，我们先看看Lib.js里的代码
# 导入全局的css import 'assets/css.css'; # 导入全局的站点配置文件 import C from 'assets/conf'; # 导入全局的共用事件 import M from 'assets/common'; var Rxports = { M,C }; module.exports = Rxports
在上方代码的M、C都是什么鬼，聪明的小伙伴就知道我想干嘛了，省写少事呗。
例如我们现在想调用APP的名称，在.vue里可以这么写
import Lib from 'assets/Lib.js' Lib.C.appname; # 蓝锅锅
只需要在*.vue里导入import Lib from 'assets/Lib.js'，就可以到处使用全局模块了。
不再像传统的开发模式，需要一堆的<script>一个一个的来放到页面的底部。
传统方式：
<script type='text/javascript' src='https://g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script> <script type='text/javascript' src='https://g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script> <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
这里就是我想讲的关于优化的第一点提到的全局模块库。
当然也有童鞋问呀，会不会每个页面都会把这些全局模块库都打包在当前页面，那JS文件体积大到惊人。