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项目
到这里项目就已经创建成功了,下面是对项目中的代码风格进行配置👇,代码规范
注意: 下面↓的配置可根据项目情况自行配置,也可以不配置👇
负责搭建完成后,为了后期团队一起开发时,能够统一代码风格,我在项目的根目录下创建.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插件,