vue-template

通用示例，具体根据自己的需求调整

Project setup

yarn install          # 安装依赖
yarn run serve        # 启动开发环境
yarn run build        # 打包生产环境
yarn run lint         # 检查和修复错误的格式
yarn run preview:prod # 预览生产环境的应用
yarn run preview:pre  # 预览其他打包环境的应用

查看完整的webpack配置可以执行命令yarn inspect --mode production > xx.js导出为js(或其他文件格式)查看，默认eslint会进行语法检测。

打包资源完整使用CDN

vue.config.js配置项baseUrl配置开启，判断了本地开发环境和打包环境的配置，默认不开启。在生产环境设置CDN配置，即所有的打包资源都可以放到CDN服务器上，减少主服务器压力。例如baseUrl设置为https://cdn.domain.com/，那么除了排除的外部链接，所有打包出来的资源都将从https://cdn.domain.com/获取，当然前提你的将打包出来的资源文件部署到资源CDN上。那么在主服务器上只需要部署index.html就行了，其他的资源文件全部丢给CDN。

去除element-ui

注释掉或者删除index.html的 <link rel="stylesheet" href="https://unpkg.com/element-ui@2.4.11/lib/theme-chalk/index.css"> 和 <script src="https://unpkg.com/element-ui@2.4.11/lib/index.js"></script> 代码

去除或者修改px转rem

postcss.config.js配置文件的postcss-px2rem为px自动计算转换rem的配置，标准为设计图的设计尺寸/10，即750的设计图应该设置为remUnit: 75。

去除自动转换的话，注释或者删除postcss.config.js的postcss-px2rem配置即可。

生产环境请求源设置

fetch.js下的baseURL设置，默认设置为固定请求源，可以调整为baseURL: process.env.BASE_URL设置为请求本地源，用于nginx做proxy配置。

添加多个打包环境

有关于环境变量和模式的文档可以查阅官方网文档。

新建换将变量文件.env.xxx，添加环境变量NODE_ENV=production启用打包，指定OUTPUT_DIR输出打包目录，其余环境变量可自行增删。

注：在项目中使用的环境变量设置要以VUE_APP_开头，而在node环境下，即webpack打包的配置所需要的环境变量，可以不需要前缀。

在封装函数中使用组件，依然需要执行按需引入

策略可以自己调整，也可以全部引入或者只采用按需引入的方式。这里以element-ui为例。在.babel.config.js中配置插件(以element-ui的message组件为例)

plugins: [
  [
    'component',
    {
      libraryName: 'element-ui',
      styleLibraryName: 'theme-chalk'
    }
  ]
]

然后在封装的函数中引入(项目中以封装axios的fetch.js为例)

import { Message } from 'element-ui';
import './../assets/style/toast.scss';

因样式加载顺序会覆盖的问题，需要单独对引入的组件做样式处理。

router和store的处理

router几乎没有做处理，这块的操作因项目而异。

store进行了文件读取操作，按照模块功能划分的处理进行改造。当新增加module的时候，可以直接在modules文件夹下创建xxx.js，所有的状态都被vuex读取并管理。

注：因为读取文件的数据，state会多一层对象，所以直接通过读取state会读取不到，详情请查看vuex的modules。假如我要读取xxx.js文件下的状态count，我们可以通过读取$store.getters.count或者$store.state.xxx.count，否则就不能够正确的读取到state，具体的可以查阅vuex官方文档。

KnorienChang/vue-template