Vue 多页面脚手架

背景：

vue2.0已经上线有一段时间了， 现在vue2.5也都已经发布了，对于vue.js来说相信大家都已经很熟悉了。然而对于团队来说， 由于过去种种的原因，目前项目还是使用zeptos.js + gulp.js 的方式进行开发， 同时部分页面因为兼容seo友好的情况下，进行后端渲染，后端为java的freemarker 模板， 因此对于整个项目的前端升级一直即为头痛。

随着webpack2的发布，以及其模块化和当下业界的支持，今天基于其他同学的一些参考以及改造，编写了一套vue.js的多页面脚手架，用于常态业务的逐步升级

开发环境准备

1. Node.js v6.x npm v5.5.1
2. windows 7以及上 与 mac os

运行项目

安装前端项目工程依赖包
npm install

开发运行环境;运行命令后，浏览器自动打开 http://localhost:8091/views/pages/index.html
npm run dev

开发完成后打包命令，会生成dist文件夹 可通过启动静态服务指向dist目录访问
npm run build

主要功能

1. 全局统一使用的模块Lib.js库 -> 公用第三方库插件，公用js,css 以及静态资源可在Lib.js中调用
2. 支持字体图标
3. 构建时，对css打包的支持
4. 提取公共模块
5. 可自定义页面模块名，例如 http:// localhost:8091/views/pages/index.html，views就是我们线上的模块名
6. 支持多级目录
7. 模块下静态文件可直接调用
8. 基于webpack2，更高的构建速度，包体积更小，全面支持ES6 Modules
9. 热更新，效率提升神器呀
10. 支持Lesscss预处理
11. 获取多页面的url参数的方法

目录结构

webpack
 |---build
 |---src
     |---assets    #资源
     |---css/common.css  #css
     |---font/    #字体图标
     |---js/common.js    #自己定义的全局通用事件
     |---js/conf.js    #项目的配置
     |---js/Lib.js    #暴露接口给组件调用	
 |---components 组件
     |---c-head 
        |---c-head.vue  head组件
     |---c-products 
        |---c-products.vue  产品列表组件
	  |---c-swiper 
        |---c-swiper.vue  轮播图组件
|---views    #各个页面模块，模块名可以自定义哦！
     |---pages    #页面模块
        |---index	首页模块
            |---index.html
            |---index.vue
            |---index.js
        |---list  列表页模块
            |---list.html
            |---list.vue
            |---list.js
        |---detail   详情页页模块
            |---detail.html
            |---detail.vue
            |---detail.js
......
     

总结

此项目脚手架为vue2多页面脚手架， 目前还在开发预演中，要使用到生产环境上请大家谨慎选择 谢谢！

项目借鉴

• 本次项目主要借鉴于蓝狐同学的vue-cli-multi-page
• 目前项目主要仿造唯品海外网站us.vip.com