介绍
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供:
通过 @vue/cli 搭建交互式的项目脚手架。
通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。
一个运行时依赖 (@vue/cli-service),该依赖:
可升级;
基于 webpack 构建,并带有合理的默认配置;
可以通过项目内的配置文件进行配置;
可以通过插件进行扩展。
一个丰富的官方插件集合,集成了前端生态中最好的工具。
一套完全图形化的创建和管理 Vue.js 项目的用户界面。
这是官方对Vue CLI 3的介绍,在使用全新的Vue CLI 3 开发项目过程中,个人认为大多数小型项目基本可做到零配置。
安装
安装教程官方文档有比较详细的解答,不再赘述。
项目结构
|-- dist 编译后的文件目录
|-- node_modules 依赖包
|-- public 模板文件和静态资源
|-- src 开发目录(配置完成后基本只在该文件夹开发即可)
|-- assets 资源,如 css、image、iconfont
|-- components 组件
|-- router 路由 vue-router
|-- store 状态 vuex
|-- views 路由组件,即某个路由直接指向该组件
|-- App.vue 根组件
|-- main.js 项目入口
|-- .browserslistrc 配置支持的浏览器范围,babel会根据这个进行 Polyfill
|-- .editorconfig 设置该项目的编辑器的配置
|-- .env.development 开发环境自定义参数
|-- .env.production 生产环境自定义参数
|-- .eslintrc.js eslint 配置
|-- .gitignore git 忽略目录
|-- babel.config.js babel 配置
|-- package.json 项目依赖列表
|-- postcss.config.js postcss 配置
|-- README.md
|-- vue.config.js 项目配置及 webpack 配置
使用Vue CLI 3创建一个项目,项目的结构大概如此,因为部分文件是当你有需要自己添加的。下面会介绍一些文件夹具体的功能。
public
public文件夹类似之前脚手架项目的static文件夹,但是,现在的html模板文件也会放在该文件夹内,在打包过程中除了html模板文件,其他资源会直接复制到dist文件夹下,而不需要编译和压缩。
src
src文件夹与之前的脚手架项目基本相同,不同点在于,该项目多了一个view文件夹,我们可以把路由组件放在该文件夹内,便于我们项目的维护,当然,你也可以放在其他文件夹。
同时,建议将router.js和store.js进行拆分,分别放入router文件夹和store文件夹,小型项目拆分的作用并不大,但是当你的项目有几十上百的页面时,你会发现,拆分后的代码阅读起来是如此的清爽~
.env.xxx
这类文件主要是根据环境来载入不同的变量。这类变量是可以在客户端使用的,但是要遵循一定的规则。
只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中。
比如你在.env.xxx文件定义了如下变量:
VUE_APP_SECRET=secret
那么你可以在客户端代码中这样使用:
console.log(process.env.VUE_APP_SECRET)
官方配置文档
vue.config.js
如果你的项目需要一些个性化的配置,那么基本上所有的配置需要在 vue.config.js 文件内进行配置。
官方配置文档
部分配置示例:
module.exports = {
baseUrl: process.env.NODE_ENV === 'production'
? '/app/'
: '/',
// 多页面应用 https://cli.vuejs.org/zh/config/#pages
// pages: {},
// 请求代理
devServer: {
proxy: {
'/api': {
target: '<url>',
ws: true,
changeOrigin: true
}
}
},
// 生产环境下的sourceMap
productionSourceMap: true,
chainWebpack: config => {
if (process.env.NODE_ENV === 'production') {
// 为生产环境修改配置...
config
.externals({
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex': 'Vuex',
})
} else {
// 为开发环境修改配置...
}
}
}
总结
Vue CLI 3 带来了更简单的配置、更丰富的功能,但是同时也拥有新的配置模式,如果没有熟悉官方文档就盲目的进行配置和使用会带来一些问题,建议还是在使用之前大概的查看一下官方的配置文档,以便于在出现问题时能够及时解决。