Vue3 项目搭建

安装全局 @vue/cli

Vue3 与 Vue2 的脚手架安装方式稍有不同,Vue2 安装的是 vue-cli,Vue3 安装的是 @vue/cli。如果之前已经安装过 Vue2 的 vue-cli,那么要先将其卸载,再安装 Vue3 的 @vue/cli。而且 @vue/cli 仍可以创建 Vue2 项目,所以可放心卸载。

安装 @vue/cli 的命令如下:

1
npm install @vue/cli -g

创建 Vue 项目

创建项目的方式也与 Vue2 不同,执行如命令:

1
vue create projectname

回车之后会出现三个选项,分别表示:

  • 创建默认的 Vue2 项目
  • 创建默认的 Vue3 项目
  • 自定义创建项目

我们一般选择第三项,确认之后又出现一串选项,并提示“按空格键选择,按 a 全选,按 i 反选”。

我们一般在原有基础上再选择:

  • Router
  • CSS Pre-processors
  • vuex

如果不想使用 ESLint,可以取消选项 “Linter / Formatter”。

然后按回车进行具体配置,步骤如下:

  1. 选择 Vue 的版本,根据自己需要选择,这里选择 “3.x”
  2. 是否使用历史模板,选择 “n”
  3. CSS 预处理器,根据需要选择,这里选择 “Less”
  4. 选择一个 linter / formatter 的配置,选择第一个
  5. 选择另一个 lint 的特点,我们选择第一个
  6. Babel,ESLint 的配置项存放地址,选择 “In package.json”
  7. 是否将此项目的配置用于之后的项目,选择 “N”

回车之后项目就开始创建了,到此,Vue3 项目创建完成。