vue-common-h5-template

基于vue-cli4 搭建的初始H5模板，快速构建面向现代浏览器的H5初始工程

项目架构

框架

• vue
• vuex
• vue-router

请求库

• axios

UI组件

• mint-ui

插件

• vuex-persistedstate
• lib-flexible
• js-cookie

写在前面

升级到vue-cli4后许多配置都和vue-cli2.x时代不同，且相对vue-cli3.x又存在一些变化，需要踩坑。

新版CLI注意点

• webpack配置移除

许多之前的build文件等目录结构都变成内置在node模块里，我们可以显式指定一份vue.config.js配置文件在根目录，相反这种目录结构更加简洁明了。

• 静态资源目录变动

相对 cli 2.x, 新版的资源目录从原来的 static迁移至public，原来的模板文件 index.html，迁移至 /public/index.html

• 现代模式

现如今绝大多数现代浏览器都已经支持了原生的 ES2015，所以因为要支持更老的浏览器而为它们交付笨重的代码是一种浪费。Vue CLI 提供了一个“现代模式”帮你解决这个问题

可以向后兼容，用到了<script type="module">，需要配合始终开启的 CORS 进行加载

• 快速原型构建

可以直接针对单页面.vue文件直接启动一个服务，方便原型开发。

• GUI界面

你也可以通过 vue ui命令以图形化界面创建和管理项目，可以分析依赖包的大小，插件安装情况等。

项目特性

• 全局配置：src/config/api.js，可以按需配置使用

• 请求封装：src/utils/https.js，可以按需配置使用

• 环境变量：目前只配置了生产环境env.production，可以按需配置使用

• 针对生产环境的构建流程配置和优化：cdn加速，chunks分割，gzip压缩，soureMap默认关闭

• 持续集成： 增加Travis-CI自动化打包docker镜像push到对应的docker仓库中，开箱即用

待实现特性

• 按需引入UI组件
• px转rem无感
• 更新移动端dpr适配方案
• 增加docker + travis ci持续集成