基于vuejs2+webpack2+vuxui2多页面架手脚，支持二级目录

前言

vue2.0上线已经有一段时间了，如今vue2.1也都已经发布了，是时候来更新基于vue的多页面脚手架了。

相信用vue的童鞋，不少一部分在用于spa（单页面）项目，也不排除传统的多页面项目，咱们就用vue开发了多页面的webapp，相对于spa开发效率更高，使用单页面或者多页面，最终仍是看项目的需求啦。

这一次咱们基于vuejs2+webpack2+vuxui2(好222的项目)从新发布了全新的vue脚手架，同时还支持二级目录，以解决页面比较多时，便于归类查找的问题。基于webpack2，构建速度高。ajax获取数据，使用axios，固然还有其余的优化，我们先看看demo呗。

demo地址：
v.lanchenglv.com/demo/vue2-c…

github地址：
github.com/bluefox1688…

此版仅支持vu2.0，若是须要vue1.0多页面脚手架，请访问分支
github.com/bluefox1688…

2.0的主要功能

1. 全局统一使用的模块Lib.js库
2. 支持字体图标
3. 构建时，增长对css打包的支持
4. 提取公共模块
5. 多页面可以使用vue-router2路由
6. 可自定义页面模块名，例如 http:// localhost:8091/views/home/list.html，views就是咱们线上的模块名，1.0版只能固定的
7. 支持二级目录，便于归类，1.0版本暂时仅支持一级目录
8. 模块下静态文件可直接调用
9. 发送ajax请求，使用axios库，简单封装了一个库，为了减小学习成本，封装参数基本与JQ ajax一致，若是不须要可直接删除
10. 整合了vue最流行的UI框架，vuxui2.x，github star 已接近8K了，组件很是全面，而且做者一直有维护，从0.x版本我就开始有使用了，具体了解更多，请访问官网 vux.li
11. 基于webpack2，更高的构建速度，包体积更小，全面支持ES6 Modules
12. 热更新，效率提高神器呀
13. 支持Lesscss预处理
14. 获取多页面的url参数的方法
15. 全局注册vue全局过滤器的方法

Build Setup

clone到本地仓以后，自行npm **，都是老司机了，这里也不重复了。

# 安装依赖
npm install

# 调试环境 serve with hot reload at localhost:8091
npm run dev

# 生产环境 build for production with minification
npm run build复制代码

本地默认访问端口为8091，须要更改的童鞋请到项目目录文件config/index.js修改。

目录结构

webpack
 |---build
 |---src
     |---assets    #资源
     |---css/common.css  #css
     |---font/    #字体图标
     |---js/common.js    #本身定义的全局通用事件
     |---js/conf.js    #项目的配置
     |---js/Lib.js    #暴露接口给组件调用
     |---js/vueFilter.js    #注册vue的全局过滤器    
 |---components 组件
     |---Button.vue  按钮组件
     |---hb-head.vue  head组件
|---views    #各个页面模块，模块名能够自定义哦！
     |---home    #一级目录
        |---list    #二级目录
             |---list.html
             |---list.js
             |---listApp.vue
     |---vuxDemo    #一级目录
        |---button    #二级目录
             |---button.html
             |---button.js
             |---buttonApp.vue    
        |---calendar    #二级目录
             |---calendar.html
             |---calendar.js
             |---calendarApp.vue         
......复制代码

这次2.0版本也优化也能够自定义模块的名称，1.0版时，没法自定义模块名。

例如 http:// localhost:8091/views/home/list.html，views就是咱们线上的模块名，如需修改请到项目目录文件config/index.js修改moduleName参数，修改这里的配置的同时，也要同时重命名/src/views的这个文件夹名称，是否会报错的。

从目录结构上，各类组件、页面模块、资源等都按类新建了文件夹，方便咱们储存文件。其实咱们全部的文件，最主要都是放在views文件夹里，以文件夹名为html的名称。
例如

|---vuxDemo    一级目录
 |---button    二级目录
   |---button.html
   |---button.js
   |---buttonApp.vue复制代码

就是咱们访问时的地址：

http://localhost:8091/views/vuxDemo/button.html复制代码

在view里二级文件夹，一个文件夹就是一个html，js``vue``html 都统一放在当前文件夹里，固然你也能够继续放其余的资源，例如css、图片等，webpack会打包到当前模块里。

还有一点要注意的，全部的目录都要求为二级，不能一个目录下为一级，另外一个目录下有二级。

Lib.js库使用

咱们作多页面开发，那确定会涉及到全局都能调用的公共库，或者是把别人封装的库也一块儿打包在全局公共模块里。

若是看过源码的童鞋，在*.vue页面里，都统一import了一个文件

import Lib from 'assets/js/Lib';复制代码

这就是全局统一公共模块，咱们先看看Lib.js里的代码

# 导入全局的css
require('assets/css/common.css');
# 导入全局的站点配置文件
import C from './conf';
# 导入全局的共用事件
import M from './common';

export default{
    M,C
}复制代码

在Lib.js的M、C都是事件调用简写。例如咱们如今想调用APP的名称，在.vue里能够这么写

import Lib from 'assets/js/Lib';
Lib.C.appname;  #蓝橙绿复制代码

只须要在*.vue里导入import Lib from 'assets/js/Lib';'，就可使用全局模块了。
固然你还能够在Lib作一些程序判断，例如权限判断等。

公共模块

咱们一般会把经常使用的库都打包成公共模块，CommonsChunkPlugin 插件，是一个可选的用于创建一个独立文件(又称做 chunk)的功能，这个文件包括多个入口 chunk 的公共模块。最终合成的文件可以在最开始的时候加载一次，便存起来到缓存中供后续使用。这个带来速度上的提高，由于浏览器会迅速将公共的代码从缓存中取出来，而不是每次访问一个新页面时，再去加载一个更大的文件。

不一样的项目，使用到的插件库数量有所不一样，咱们能够调整minChunks以达到公共模块的大小，文件路径为/build/webpack.prod.conf.js，cart+F查找minChunks参数，minChunks: 4 意思表明为至少被4个页面引用了，就打包进入公共模块，具体的使用方法，能够再详细了解webpack中文文档。www.css88.com/doc/webpack…

存在的问题

一、多页面可使用vue-router路由，可是没法使用按需加载，即懒加载，研究过在多页面的路由里按需加载，但从未成功，若是有童鞋研究成功了，能够发lssues一块儿交流哈。

二、暂时尚未作css自动补前缀

三、......

结束言

此vue多页面脚手架，并不局限于vux ui 框架，但如今的UI框架都要本身对webpack简单配置下。

生命在于折腾，理想仍是要有的，万一实现了呢。

有问题随时Issues哈！

文章首发地址：

lanchenglv.com/article/201…