首先查看官方文档
https://cli.vuejs.org/zh/guide/
稍微了解一下后开始接触vue/cli3.0 如果之前已经安装了2.0先使用npm 命令卸载2.0
- 安装vue/cli3 使用命令:npm install -g @vue/cli
- 使用命令生成一个基础项目:vue create myproject
- 使用命令: npm run serve运行项目
注:①与vue-cli2相比少了两个配置文件夹,但依旧可以进行手动配置,在根目录下创建vue.config.js文件,这个文件一旦存在就会被@vue/cli-service自动加载。
②可以使用vue ui命令创建和管理项目,
通过官方文档了解到本次手脚架的两个特性。
1.有一套完全图形化的创建管理用户界面。
2.一个运行时依赖 (@vue/cli-service
),该依赖:
- 可升级;
- 基于 webpack 构建,并带有合理的默认配置;
- 可以通过项目内的配置文件进行配置;
- 可以通过插件进行扩展。
3相比起2少了两个配置的文件夹,所以配置都去了哪里。
在看文档的过程中,我们知道可以使用命令进行简单的配置指定参数。比如npm run serve和npm run dev这个l两个指令。
在默认 preset 的项目的 package.json中,
npm scripts 以 vue-cli-service
、或者从终端中以 ./node_modules/.bin/vue-cli-service
访问这个命令。
{
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
}
}
用法:vue-cli-service build [options] [entry|pattern]
选项:
--mode 指定环境模式 (默认值:production)
--dest 指定输出目录 (默认值:dist)
--modern 面向现代浏览器带自动回退地构建应用
--target app | lib | wc | wc-async (默认值:app)
--name 库或 Web Components 模式下的名字 (默认值:package.json 中的 "name" 字段或入口文件名)
--no-clean 在构建项目之前不清除目标目录
--report 生成 report.html 以帮助分析包内容
--report-json 生成 report.json 以帮助分析包内容
--watch 监听文件变化
除了这种简单的配置还有另外一种方法。在根目录下创建vue.config.js文件。
vue.config.js
是一个可选的配置文件,如果项目的 (和 package.json
同级的) 根目录中存在这个文件,那么它会被 @vue/cli-service
自动加载。你也可以使用 package.json
中的 vue
字段,但是注意这种写法需要你严格遵照 JSON 的格式来写。
详细参数查看官网。https://cli.vuejs.org/zh/config/#vue-config-js