1.查看脚手架版本

// 查看脚手架版本号
vue -V 或 vue --version

2.卸载原来的脚手架

// 卸载旧版本的脚手架
npm uninstall vue-cli -g

3.安装脚手架

// 安装 vue3 的脚手架
npm i @vue/cli -g

4.查看 vue-cli 版本

// 查看脚手架版本号
vue -V 或 vue --version

5.创建项目

// 创建 vue3 项目
vue create 项目名

自定义安装【* 代表选中，用空格键来切换 “选中/取消”】

选完回车确认，选择 vue 版本 3.x

是否使用 history router，我这里选择 yes

Vue-Router 利用了浏览器自身的hash 模式和 history 模式的特性来实现前端路由（通过调用浏览器提供的接口）
hash： 浏览器url址栏中的 # 符号（如这个 URL：www.abc.com/#/hello，has… 的值为“ #/hello”），hash 不被包括在 HTTP 请求中（对后端完全没有影响），因此改变 hash 不会重新加载页面
**history：**利用了 HTML5 History Interface 中新增的 pushState( ) 和 replaceState( ) 方法（需要特定浏览器支持）。单页客户端应用，history mode 需要后台配置支持，否则项目build之后，可能会出现打开页面空白的情况哦。

选择一种css预处理器就选择 less，因为之前使用dart-sass会有图标乱码问题

选择一种代码格式化检测工具，这里我选择第一个，后续可以自己加。

代码检查方式，这里我选择第一个。

Babel， PostCSS， ESLin等配置文件怎么存放，是放到单独的配置文件中还是package.json里这里方便配置清晰好看， 我选择每个配置单独文件。

是否需要保存当前配置，在以后的项目中可快速构建保存后, 后续创建项目时可以直接选择该配置, 不需单独配置，如果选择 yes 需要自己起个默认名，我选择no。

选择完就开始创建了

看到这个就说明项目已经初始化成功，然后cd vue3 进入文件夹，运行npm run serve指令项目就启动了

在浏览器中输入启动的服务地址，就可以看到如下界面。

vue3.0 项目搭建到此已经完成。

6.配置 ESLint

vue3 脚手架工具 vue-cli 下载下来的项目模板，在根目录下有一个 eslint 的配置文件 .eslintrc.js，修改其配置。

// .eslintrc.js:
module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: ['plugin:vue/vue3-essential', 'eslint:recommended'],
  parserOptions: {
    parser: '@babel/eslint-parser',
  },
  rules: {
    // 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    // 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',

    // 自定义 eslint - zhf - 2022.6.11 17:59
    /* 
      "off"或者0    //关闭规则关闭
      "warn"或者1    //在打开的规则作为警告（不影响退出代码）
      "error"或者2    //把规则作为一个错误（退出代码触发时为1） 
    */
    quotes: [1, 'single'], // 规则为警告 - 引号类型为单引号
    semi: [1, 'always'], // 规则为警告 - 语句强制分号结尾
    'no-console': 0, // 允许使用console
  },
};

在 visual studio code 中安装 ESLint 插件并启用。

配置 visual studio code 配置文件

配置文件所在文件位置为 C:/Users/z/AppData/Roaming/Code/User/settings.json。

// settings.json:
{
    ...
    "editor.formatOnType": true,
        "eslint.codeAction.showDocumentation": {
            "enable": true
        },
        "editor.codeActionsOnSave": {
            "source.fixAll.eslint": true,  // 文件保存时启动 eslint自动修复功能
        },
        "eslint.validate": ["javascript", "javascriptreact", "html", "vue"],
    ...
}

7.配置 Prettier

在项目中安装 prettier: npm install prettier -D;(可以省略该过程)

在项目根目录下新建 prettier的配置文件 .prettierrc 或 .prettierrc.js。

如果文件名为 .prettierrc ，则配置文件的数据格式为json；
如果文件名为 .prettierrc.js，则配置文件为导出配置对象。

这里以 .prettierrc.js 进行配置：

// .prettierrc.js:
module.exports = {
    tabWidth: 2, // 使用 2 个空格缩进
    singleQuote: true, // 使用单引号
    jsxSingleQuote: true,
    jsxBracketSameLine: false, // jsx 标签的反尖括号需要换行
    printWidth: 800, // 一行最多 800 字符
    htmlWhitespaceSensitivity: 'css', // 根据显示样式决定 html 要不要折行
    arrowParens: 'always', // 箭头函数，只有一个参数的时候，也需要括号
};

然后在 visual studio code 中安装插件 Prettier - Code formatter;

修改配置文件

修改 C:/Users/z/AppData/Roaming/Code/User/settings.json 配置文件。

// settings.json:
{
    ...
   // setting.json文件
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
    ...
}

注意：.prettierrc（或 .prettierrc.js）配置文件的配置优先级比 settings.json 中的配置优先级高，所以如果两个文件中都有配置共同的数据属性选项，则按照 .prettierrc 文件中的配置执行。

8.创建项目异常的情况

使用 vue 创建项目的时候，报错 Error: spawn yarn ENOENT

报这种错误，主要有两种情况：

用户自己设置了默认的包管理 yarn
没有安装 yarn

针对第一种情况：如果是用户自己设置了默认的包管理 yarn，可以将默认文件里的属性改为 npm 就好，具体操作如下：

打开 C盘，在 C盘里，打开 users （用户名）的文件夹，然后在右侧搜索名为 .vuerc 的文件，如下所示：
打开该文件，找到 packageManager 属性，可看到自己配置的默认值为 yarn，将其值修改为 npm即可，如下所示：

针对第二种情况：没有安装 yarn，那么直接输入命令 npm install yarn -g 安装 yarn 即可。

拓展

手把手教你vue3.0项目搭建
 手把手教你搭建vue3项目

新建 vue3 项目之 vue-cli