Vue3 脚手架搭建项目详细过程-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue3 脚手架搭建项目详细过程。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、安装 vue3.0 脚手架

如果之前安装了2.0的脚手架，要先卸载掉，输入：npm uninstall vue-cli -g 进行全局卸载

然后重新安装：npm install @vue/cli -g

二、项目搭建过程

由于 git bash 来执行命令的时候无法使用键盘上下键来进行选项选择，所以我们要使用 cmd / powershell，这里使用 cmd

1.vue create + 项目名称

Vue3 脚手架搭建项目详细过程

2.模板选择，通过键盘上下键来选择，我们选择第三个自定义

这三个选择分别是 vue2 / vue3默认模板 / Manually select features 手动选择（自定义）的意思

Vue3 脚手架搭建项目详细过程

3.选择我们需要的默认配置（通过空格键来选中）

Vue3 脚手架搭建项目详细过程

4.vue版本的选择，我们选择 vue3

Vue3 脚手架搭建项目详细过程 5.是否使用 class 风格的 component，不使用，输入N

Vue3 脚手架搭建项目详细过程

6.是否使用 babel 来处理 ts 代码，选择，输入 Y

Vue3 脚手架搭建项目详细过程

7.是不是用 history 模式来创建路由，不使用，输入n，后续需要使用可以在配置中做修改

Vue3 脚手架搭建项目详细过程

8.选择 css 处理器，这里选择 less

Vue3 脚手架搭建项目详细过程

9.选择代码检测方式，我选择 eslint = prettier

Vue3 脚手架搭建项目详细过程

10.选择什么时候对代码做 eslint，这里选择保存代码的时候

Vue3 脚手架搭建项目详细过程

11.对于刚才选择的配置，是选择生成独立的配置文件，还是保存到 pack.json中，这里选择独立的文件

Vue3 脚手架搭建项目详细过程 12.最后一步是是否将本次配置保存成一个预设，选择不保存，输入N，敲一下回车，就开始创建项目了

Vue3 脚手架搭建项目详细过程

三、项目搭建完成后代码规范配置

1.集成 editorconfig 配置

EditorConfig 有助于为不同的 IDE 编辑器上处理同一项目的多个开发人员维护一致的编码风格。

VSCode 需要安装一个插件：EditorConfig for VS Code

我们需要在代码主目录下，创建一个 .editorconfig 文件，将下面的配置复制进去即可：

# http://editorconfig.org

root = true

[*] # 表示所有文件适用
charset = utf-8 # 设置文件字符集为 utf-8
indent_style = space # 缩进风格（tab | space）
indent_size = 2 # 缩进大小
end_of_line = lf # 控制换行类型(lf | cr | crlf)
trim_trailing_whitespace = true # 去除行首的任意空白字符
insert_final_newline = true # 始终在文件末尾插入一个新行

[*.md] # 表示仅 md 文件适用以下规则
max_line_length = off
trim_trailing_whitespace = false
————————————————
版权声明：本文为CSDN博主「前端.攻城狮」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_45304198/article/details/121720873

2.使用 prettier 工具

Prettier 是一款强大的代码格式化工具，支持 JavaScript、TypeScript、CSS、SCSS、LESS、JSX、Angular、Vue、GraphQLQ、JSON、Markdown等语言，基本上前端能用到的文件格式它都可以搞定，是当下最流行的代码格式化工具。

VSCode需要安装 prettier 的插件

Vue3 脚手架搭建项目详细过程

1.安装 prettier

npm install prettier -D

2.创建 .prettierrc 文件

{
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 80,
  "singleQuote": true,
  "trailingComma": "none",
  "semi": false
}

useTabs：使用 tab 缩进还是空格缩进，选择 false；

tabWidth：tab 是空格的情况下，是几个空格，选择 2 个；

printWidth：当行字符的长度，推荐 80，也有人喜欢 100 或者 120；

singleQuote：使用单引号还是双引号，选择 true，使用单引号；

tralilingComma：在多行输入的尾逗号是否添加，设置为 none；

seml：语句末尾是否要加分号，默认值 true，选择 false 表示不加；

3.创建 .prettierignore 忽略文件

/dist/*
.local
.output.js
/node_modules/**

**/*.svg
**/*.sh

/public/*

4.可以在 package.json 中配置一个 script，方便执行一下脚本就可以对全部文件做格式化

"prettier": "prettier --write ."

3.使用 ESLint 检测

VSCode 需要安装 ESLint 插件

Vue3 脚手架搭建项目详细过程

1.解决 eslint 和 prettier 冲突的问题：

安装插件：（vue在创建项目时，如果选择 prettier，那么这两个插件会自动安装，就不用手动再安装）

npm i eslint-plugin-prettier eslint-config-prettier -D

添加 prettier 插件到 .eslintrc.js 中："plugin:prettier/recommended"

  extends: [
    "plugin:vue/vue3-essential",
    "eslint:recommended",
    "@vue/typescript/recommended",
    "@vue/prettier",
    "@vue/prettier/@typescript-eslint",
    "plugin:prettier/recommended"
  ],
————————————————
版权声明：本文为CSDN博主「前端.攻城狮」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_45304198/article/details/121720873

Vue3 脚手架搭建项目详细过程