0
点赞
收藏
分享

微信扫一扫

详解如何搭建vue3+TypeScript项目

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、这里意思是:要不要把刚在的选择操作保存预设,这里输入不保存

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插件,

 

举报

相关推荐

0 条评论