前言Vue2.0已经上线一段时间了，现在vue2.1也发布了，是时候更新一下基于vue的多页面了页面脚手架。相信很多使用vue的童鞋都是做spa（单页）项目的，也不排除传统的多页项目。我们用vue开发了一个多页面的webapp，比spa开发效率更高。使用单页还是多页，到底要看项目的需要。这次我们重新发布了一个全新的基于vuejs2+webpack2+vuxui2的vue脚手架（不错的222项目），还支持二级目录，解决页面多时方便分类查找的问题。基于webpack2，构建速度高。Ajax获取数据，使用axios，当然还有其他的优化，先看看demo吧。demo地址：http://v.lanchenglv.com/demo/...github地址：https://github.com/bluefox168...该版本只支持vu2.0，如果需要vue1.0多页脚手架，请访问分支https://github.com/bluefox168...2.0的主要功能模块全局使用lib.js库，统一支持字体图标构建时，添加支持css打包提取公共模块多页面即可使用vue-router2路由可以自定义页面模块名，比如http://localhost:8091/views/home/list.html，views是我们线上的模块名，1.0版本只能支持固定二级目录，方便分类，1.0版本暂时只支持一级目录模块下的静态文件。你可以直接调用和发送ajax请求。使用axios库可以简单的封装一个库。为了降低学习成本，封装参数与JQajax基本相同。如果不需要，可以直接删除，集成vue。最流行的UI框架，vuxui2.x，githubstar接近8K，组件很全，作者一直在维护。我从0.x版本开始就一直在使用它。更多详情请访问官网https://vux.li基于webpack2，构建速度更高，包体积更小，全面支持ES6Modules热更新，效率提升神器支持Lesscss预处理方式获取多页面vue全局过滤器的url参数全局注册方法BuildSetupclone到本地仓库后，可以自己npm**。都是老司机，这里不再赘述。#安装依赖npminstall#调试环境servewithhotreloadatlocalhost:8091npmrundev#生产环境buildforproductionwithminificationnpmrunbuild本地默认访问端口为8091，需要更改的童鞋请到修改项目目录文件config/index.js。目录结构webpack|---build|---src|---assets#resources|---css/common.css#css|---font/#fonticon|---js/common.js#自定义全局通用事件|---js/conf.js#项目配置|---js/Lib.js#暴露接口给组件调用|---js/vueFilter.js#注册vue的全局过滤器|---components组件|---Button.vue按钮组件|---hb-head.vue头部组件|---views#每个页面模块，模块名称可以自定义！|---home#一级目录|---list#二级目录|---list.html|---list.js|---listApp.vue|---vuxDemo#一级目录|---button#二级目录|---button.html|---button.js|---buttonApp.vue|---calendar#二级目录|---calendar.html|---日历。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页面，统一导入了一个文件importLibfrom'assets/js/Lib'；这是全局统一公共模块，我们看一下Lib.js中的代码#importGlobalcssrequire('assets/css/common.css');#导入全局站点配置文件importCfrom'./conf';#导入全局公共事件importMfrom'./common';exportdefault{M,C}Lib.js中的M和C是事件调用的简写。比如我们现在要调用APP的名字，我们可以写importLibfrom'assets/js/Lib';Lib.C.appname;在.vue中这样；#BlueOrangeGreen只需要importimportLibfrom'assetsin*.vue/js/Lib';'，就可以使用全局模块了。当然你也可以在lib中做一些程序判断，比如权限判断。公共模块我们通常将常用的库打包成公共模块。CommonsChunkPlugin插件是一个可选功能，用于创建独立文件（也称为chunk），其中包括多个入口chunk的公共模块。最终的合成文件可以在最开始加载一次，然后保存到缓存中以供后续使用。这导致速度提升，因为浏览器会快速从缓存中获取常用代码，而不是每次访问新页面时都加载更大的文件。不同项目使用的插件库数量不同。我们可以调整minChunks来达到public模块的大小。文件路径为/build/webpack.prod.conf.js，cart+F找到minChunks参数，minChunks:4表示如果至少被4个页面引用，就会打包到public模块中。具体使用方法可以去webpack中文文档了解更多。http://www.css88.com/doc/webp...存在问题1.多个页面可以使用vue-router路由，但是不能使用按需加载，即懒加载。我研究过多页面路由中的pressing需要加载，但是一直没有成功。有研究成功的童鞋可以发issues互相交流。2、CSS自动前缀暂时还没有做。3....总结。vue多页面脚手架并不局限于vuxui框架，目前的UI框架需要自己配置webpack。人生就是折腾，理想还是要有的，万一实现了呢。如有任何疑问，欢迎Issue！文章起始地址：http://lanchenglv.com/article...
