Vue Cli 3 官方文档:介绍 | Vue CLI
一、安装 @vue/cli
更新到 3.x 之后,vue-cli 的包名从 vue-cli 改成了 @vue/cli
如果之前全局安装了旧版本的 vue-cli (1.x 或 2.x),首先需要使用以下命令卸载掉
// 如果没有安装旧版本的 vue-cli 可以跳过卸载直接安装
npm uninstall vue-cli -g
// 然后重新安装新版本的 @vue/cli
npm install -g @vue/cli
// 安装完成后,可以通过vue -V查看版本号(-V一定要是大写的)
二、创建项目的三种方式
1.x 和 2.x 的的 vue-cli 采用 init 命令创建项目 vue init webpack project-name
3.x的创建项目:
①、vue init webpack project-name
②、图形化方式: 运行vue ui(然后浏览器会打开一个页面,可以按照页面将的引导创建项目)
③、vue create project-name
三、create方式创建项目参数详解
提示:如果你在 Windows 上通过 minTTY 使用 Git Bash,交互提示符并不工作。你必须通过 winpty vue.cmd create hello-world
启动这个命令。不过,如果你仍想使用 vue create hello-world
,则可以通过在 ~/.bashrc
文件中添加以下行来为命令添加别名。 alias vue='winpty vue.cmd'
你需要重新启动 Git Bash 终端会话以使更新后的 bashrc 文件生效。直接使用windows的cmd黑窗口不需要这么设置。
1、选择模块
如果选择默认选项 default,将会构建一个最基本的 vue 项目(没有 vue-router 也没有 vuex)
如果选择第二项 Manually select features,需要然后根据自己的需求,使用空格键选择具体的模块
勾选之后,使用回车键进入下一步
2、选择路由模式,yes 是 history 模式,no 是 hash 模式
3、选择css的预编译工具
接下来需要选择 ESLint 的校验规则,格式化的时机,和各个插件的配置项的位置,不熟悉的话就选默认
接下来就生成项目的过程了,最后你可以选择将已选项保存为一个将来可复用的 preset
运行 npm run serve 启动项目
四、对于项目中的个性化需求,可以手动创建一个 vue.config.js,进行具体的配置
官网配置文档配置参考 | Vue CLI
// 基本的vue.config.js
module.exports = {
baseUrl: '/',
outputDir: 'dist', // 打包的目录
lintOnSave: true, // 在保存时校验格式
productionSourceMap: false, // 生产环境是否生成 SourceMap
devServer: {
open: true, // 启动服务后是否打开浏览器
host: '0.0.0.0',
port: 8080, // 服务端口
https: false,
hotOnly: false,
proxy: null, // 设置代理
before: app => {}
},
}
五、环境变量配置,直接在根目录下创建以 .env 为前缀的文件
其中 .env 文件保存的是公用参数,可以在所有模式中获取到。而其他文件中的参数,只能在对应模式中获取到。
然后在文件内添加对应的键值对。
然后在 package.json 的 scripts 命令中添加对应的 mode。
然后就能在项目中获取到对应模式下的值 eg: console.log(process.env.AUTHOR)。
详细内容参考官网:模式和环境变量 | Vue CLI