使用@vue/cli 4.5.13创建一个新项目

Posted 2021-06-13 追光集

我看网上很多文章，包括我本地使用的官方脚手架是基于Vue CLI 2的。今天研究了下最新的官方文档，基于最新的@vue/cli 4.5.13一步步初始化一个项目。

官方文档：https://cli.vuejs.org/zh/guide/installation.html

node和npm安装

略

Vue CLI安装

卸载旧版本

1.如果安装了旧版本vue-cli，先卸载
sudo npm uninstall vue-cli -g

安装新版本

2.安装@vue/cli，使用国内镜像加速
sudo npm install -g @vue/cli --registry=https://registry.npm.taobao.org

Vue CLI 2桥接工具 (旧版本)

Vue CLI >= 3 和旧版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能，你可以全局安装一个桥接工具：

npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
vue init webpack my-project

该兼容旧版本的方式暂未验证

创建一个项目

使用vue create

1. 运行以下命令来创建一个新项目：

vue create hello-world

2. 手动自定义预设；也可以选择已保存的预设

3. 预设的配置

可以将预设以及配置保存供下次直接使用，配置保存在home 目录下一个名叫 .vuerc 的 JSON 文件中。

4. 生成的项目的目录结构：

5. 默认的启动命令变为npm run serve

使用图形化界面

1. 你也可以通过 vue ui 命令以图形化界面创建和管理项目：

vue ui

2. Vue 项目管理器图形界面

3. 使用图形界面创建新项目

4. 选择预设

5. 配置预设中选择的插件

   略

6. 创建完成

vue.config.js配置

以上过程创建的是一个默认配置的项目。在实际使用过程中我们常常需要自定义配置，如更改host、端口等。此时，需要在项目根目录下创建一个vue.config.js文件。

vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。

具体配置参考官方文档：https://cli.vuejs.org/zh/config/