从0开始搭建vue3项目

创建项目

我们通过npm create vite来创建vue3 项目，然后跟着终端提示操作

1. 输入项目名称，如果直接回车就是默认的

2. 选择框架 ,选择vue
3. 选择js 或者ts，我们用ts来创建
   
   到这里项目创建完成，直接cd vite-project目录，使用code .在vs code 中打开
4. 安装依赖npm i
5. 创建.editorconfig文件,为了统一在不同编辑器的编码格式 统一

# Editor configuration, see http://editorconfig.org

# 表示是最顶层的 EditorConfig 配置文件
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

eslint配置

1. 安装eslint ，npm i eslint ，可以全局安装也可以选择直接在项目里安装
2. 使用eslint —-init初始化配置文件npx eslint --init
   
   这里我们选择默认的就行了，检查语法并发现问题

3. 选择哪种类型的模块，直接回车就行了，使用es module的导入导出
   
   

   选择第一个，使用es module的导入导出

4. 只用哪种框架,选择vue

5. 是否使用typescipt,选择Y

6. 代码运行环境，选择浏览器运行

7. 希望你的配置文件是以什么格式来展示，选择javascript

8. 是否要安装他们，选择Y
9. 使用哪种包管理器，根据你们的实际情况来选择
   
   在第7步完成之后，其实我们可以直接复制eslint-plugin-vue@latest,@typescript-eslint/eslint-plugin@latest, @typescript-eslint/parser@latest, eslint@latest这些依赖来手动安装，到此我们的项目eslint就初始化完成了。
10. 打开package.json在scripts中添加"lint": "eslint . --ext .ts,.vue"

适配vue3

1. 打开.eslintrc.js文件，去掉extends中的plugin:@typescript-eslint/recommended，将plugin:vue/vue3-essential替换为plugin:vue/vue3-recommended
2. 添加.eslintignore文件，配置那些不需要校验
   我把常用的贴出来

*.md
*.woff
*.ttf
.vscode
.idea
dist
typings
/public
.husky
.local
.eslintrc.js
prettier.js

然后运行npm run lint查看eslint校验

配置代码格式化格式，安装prettier，还需要安装两个插件

1. npm i prettier eslint-plugin-prettier eslint-config-prettier
2. 修改.eslintrc.js,添加"plugin:prettier/recommended"到extends中
   
3. 添加.prettierrc.js文件，配置如下,

module.exports = {
  printWidth: 100, // 单行输出（不折行）的（最大）长度
  tabWidth: 2, // 每个缩进级别的空格数
  tabs: false, // 使用制表符 (tab) 缩进行而不是空格 (space)。
  semi: false, // 是否在语句末尾打印分号
  singleQuote: true, // 是否使用单引号
  quoteProps: 'as-needed', // 仅在需要时在对象属性周围添加引号
  bracketSpacing: true, // 是否在对象属性添加空格
  jsxBracketSameLine: true, // 将 > 多行 JSX 元素放在最后一行的末尾，而不是单独放在下一行（不适用于自闭元素）,默认false,这里选择>不另起一行
  htmlWhitespaceSensitivity: 'css', // 根据显示样式决定 html 要不要折行
  trailingComma: 'none', // 去除对象最末尾元素跟随的逗号
  useTabs: false, // 不使用缩进符，而使用空格
  jsxSingleQuote: false, // jsx 不使用单引号，而使用双引号
  arrowParens: 'always', // 箭头函数，只有一个参数的时候，也需要括号
  rangeStart: 0, // 每个文件格式化的范围是文件的全部内容
  proseWrap: 'always', // 当超出print width（上面有这个参数）时就折行
  endOfLine: 'lf' // 换行符使用 lf
}

如果需要额外配置的，可以去官网查看

4. 添加.prettierignore文件，填写你需要忽略的文件及文件夹

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

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

/public/*
*.md

添加lint-staged husky

执行这行命令会同时安装husky和lint-stage，并自动生成.husky/pre-commit文件

npx mrm@2 lint-staged

如果需要git-cz的，可以自己去官网查看 cz-git

到这里我们的项目就全部配置完成！！！