1.首先创建项目,创建命令:
vue create 项目名
2、接下来选择手动配置项目特性
3、选择项目中的一些配置:这里可根据自己的项目按需选择,以下是我的项目配置
(*) Choose Vue version 选择对应的vue版本,下一步中会进行选择
(*) Babel 是否需要Babel
(*) TypeScript 是否配置TypeScript
() Progressive Web App (PWA) Support
(*) Router 配置vue路由
(*) Vuex 配置状态管理
(*) CSS Pre-processors 配置css预处理器 比如(less、scss、sass)
(*) Linter / Formatter eslint对代码进行检查,让代码更加规范,可在项目中在次配置
( ) Unit Testing 测试相关
( ) E2E Testing 测试相关
4、选择vue的哪个版本,我这里选择vue3的版本(大家根据自己公司的项目情况去选择)
5、是否需要class风格的component,我这里不选择, 输入n
6、是否需要babel编译处理TypeScript,我这里需要,输入y
7、选择css预处理器,我这里选择less
8、eslint风格的选择:我这里选择 ESLint + Prettier
9、这里我选择在保存代码的时候进行eslint检测
10、创建项目会生成很多配置文件(比如:babel、eslint等等),这些配置是放在单独的文件,还是放在package.json文件, 这里我选择第一个,单独的,独立的文件
11、这里意思是:要不要把刚在的选择操作保存预设,这里输入n 不保存
12、到这里就显示创建成功:🆗 , 输入cd vue3-ts-cms进入项目文件夹,npm run serve运行项目
最后是创建出我们的vue3+TypeScript项目
到这里项目就已经创建成功了,下面是对项目中的代码风格进行配置👇,代码规范
注意: 下面↓的配置可根据项目情况自行配置,也可以不配置👇
1. 集成editorconfig配置
在根目录下创建 .editorconfig 文件
负责搭建完成后,为了后期团队一起开发时,能够统一代码风格,我在项目的根目录下创建.editorconfig文件来配置编译风格,确保代码在每个编译器上的编译风格
下面是.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
配置完如下:
如果是使用vscode编译的,它是不会读取.editorconfig文件,所以需要在vscode商店中下载EditorConfig for VS Code插件,
2. 使用prettier工具
Prettier 是一款强大的代码格式化工具,支持 JavaScript、TypeScript、CSS、SCSS、Less、JSX、Angular、Vue、GraphQL、JSON、Markdown 等语言,基本上前端能用到的文件格式它都可以搞定,是当下最流行的代码格式化工具。
第一步:安装prettier,在开发环境使用,这里-D
npm install prettier -D
第二步:在根目录下创建 .prettierrc 文件
-
配置.prettierrc文件:
- useTabs:使用tab缩进还是空格缩进,选择false;
- tabWidth:tab是空格的情况下,是几个空格,选择2个;
- printWidth:当行字符的长度,推荐80,也有人喜欢100或者120;
- singleQuote:使用单引号还是双引号,选择true,使用单引号;
- trailingComma:在多行输入的尾逗号是否添加,设置为
none
; - semi:语句末尾是否要加分号,默认值true,选择false表示不加;
{
"useTabs": false,
"tabWidth": 2,
"printWidth": 80,
"singleQuote": true,
"trailingComma": "none",
"semi": false
}
第三步:在根目录下创建 .prettierignore 忽略文件
/dist/*
.local
.output.js
/node_modules/**
**/*.svg
**/*.sh
/public/*
第四步: 如果使用VSCode编译器,需要安装prettier的插件,在vscode商店
配置一次性修改的命令
在package.json中配置一个scripts: "prettier": "prettier --write ."
配置完如下
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"prettier": "prettier --write ."
},
通过命令,可一次行按照我们 .prettierrc文件中的配置 格式化我们的所有文件
npm run prettier
3. 使用ESLint检测
1.在前面创建项目的时候,我们就选择了ESLint,所以Vue会默认帮助我们配置需要的ESLint环境。
2.VSCode需要安装ESLint插件:
3.解决eslint和prettier冲突的问题:
添加prettier插件,在根目录下的 .eslintrc 文件中:追加=> 'plugin:prettier/recommended'
配置完如下:
extends: [
'plugin:vue/vue3-essential',
'eslint:recommended',
'@vue/typescript/recommended',
'@vue/prettier',
'@vue/prettier/@typescript-eslint',
'plugin:prettier/recommended'
]