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官方文档。