从0搭建Vue3项目
1. 安装环境:
1.1 首先要安装node.js
安装完成后,运行命令,检测是否安装成功:
node --version
能看到node对应的版本号,就安装成功了。
1.2 vue-cli
安装
安装好node
之后,直接在终端中运行以下命令,即可安装vue-cli
。
npm install -g @vue/cli
2. 创建项目
创建项目vue3-sample
vue create vue3-sample
根据步骤一步一步进行选择所需配置
-
选择手动模式
-
选择安装的依赖,根据自己需要进行选择,按空格健进行选择,回车键进入下一步
-
Choose a version of Vue.js that you want to start the project with 3.x (Preview)。选择vue的版本,这里选择vue3.x
-
Use class-style component syntax 。是否使用Class风格装饰器? 选择no
-
Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? 使用Babel与TypeScript一起用于自动检测的填充 选择yes
-
Use history mode for router? 如果2中选择了Router,就需要进行路由模式选择。路由使用历史模式? 选择no
-
Pick a CSS pre-processor。如果2中选择了CSS pre-processor,就需要进行选择css的预处理器 根据自己需要进行选择 这里选择的时less
-
Pick a linter / formatter config。 格式校验 选择严格模式 Prettier
-
Pick additional lint features。 代码检查的方式,这里选择保存时检查 (Lint on save)
-
Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files 。需要将依赖的配置文件怎么保存 , 这里选择保存到单独的文件中 (in dedicated config files)
-
Save this as a preset for future projects? 是否保存当前的配置,在将来使用。根据自己需要no或者yes,选择yes 以后创建项目时可以直接根据本次的配置直接创建项目,无需一步一步进行选择。
12.完成以上步骤,等待编译 完成创建项目, 创建成功后会出现 npm run serve
命令,然后按照操作 cd
到项目目录中, 然后输入 npm run serve
命令 运行项目。等待编译项目,编译完成后 会出现访问地址 直接再浏览器中运行,就可以看到创建的项目了。
配置项目规范
制定规范的目的:
- 定制统一标准
- 提高代码可维护性
- 降低阅读者理解成本
- 提高项目的可扩展性
规范涉及到开发的方方面面,有代码命名规范、各类语言书写的规范、编码风格规范、代码提交规范等等 。在这里介绍了部分规范:编码风格规范和代码提交规范。
1. 集成editorconfig
配置
editorConfig
有助于为不同 IDE 编辑器上处理同一项目的多个开发人员维护一致的编码风格。
1.1 创建.editorconfig
文件
# EditorConfig is awesome: https://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
在项目的根目录中,直接创建.editorConfig
文件,复制上面的内容即可。
1.2 安装插件
VSCode
需要安装一个插件EditorConfig for VS Code
,用来读取.editorconfig
配置文件
2. 使用prettier工具
Prettier
是一款强大的代码格式化工具,支持 JavaScript、TypeScript、CSS、SCSS、Less、JSX、Angular、Vue、GraphQL、JSON、Markdown
等语言,基本上前端能用到的文件格式它都可以搞定,是当下最流行的代码格式化工具。
2.1 安装prettier
前面创建项目的时候,已经选择了prettier
就无需再安装了,前面没有选择就需要执行下面的命令:
npm install prettier -D
2.2 配置.prettierrc
文件:
- useTabs:使用tab缩进还是空格缩进,选择false为空格缩进;
- tabWidth:tab是空格的情况下,是几个空格,选择2个;
- printWidth:当行字符的长度,推荐80,根据自己的喜好设置100、120都可以;
- singleQuote:使用单引号还是双引号,选择true为单引号;
- trailingComma:在多行输入的尾逗号是否添加,设置为
none
; - semi:语句末尾是否要加分号,默认值true,选择false表示不加;
- bracketSameLine:>括号是否在一行显示设置为true表示在一行
- endOfLine: auto不让prettier检测文件每行结束的格式
直接在项目的根目录中创建 .prettierrc
文件,复制下面的内容即可。
注意:.prettierrc
文件中不能使用注释
{
"useTabs": false,
"tabWidth": 2,
"printWidth": 80,
"singleQuote": true,
"trailingComma": "none",
"semi": false,
"bracketSameLine": true,
"endOfLine": "auto"
}
2.3 创建.prettierignore
忽略文件
在下面这些目录文件中,不需要进行检测
/dist/*
.local
.output.js
/node_modules/**
**/*.svg
**/*.sh
/public/*
2.4 vscode
需要安装prettier
的插件
2.5 在项目的package.json
的scripts
中配置命令
"scripts": {
...
"prettier": "prettier --write ."
},
然后在终端中运行 npm run prettier
,就会对所有的文件进行代码格式化。
3. 使用ESLint检测工具
3.1 创建.eslintrc.js
文件
在前面创建项目的时候,我们就选择了ESLint
,所以Vue
会默认帮助我们配置需要的ESLint
环境。
3.2 安装ESLint
插件
3.3 解决eslint
和prettier
冲突的问题
我们安装了这两款检测工具,肯定会发生一些规范的冲突。我们可以安装插件来进行解决,直接运行下面的命令即可。
注意:在创建项目时,选择了prettier
,就会自动安装这两款插件,就无需再执行次命令了
npm install eslint-plugin-prettier eslint-config-prettier -D
我们需要在.eslintrc.js
文件中添加配置,直接在extends
数组末尾添加如下示例代码。
extends: [
...
'plugin:prettier/recommended'
],
4. git
提交代码检查及规范
虽然我们已经要求项目使用eslint
了,但是不能保证组员提交代码之前都将eslint
中的问题解决掉。
那么我们就需要在执行 git commit
命令的时候对其进行校验,如果不符合规范,那么就通过规范进行修复。
可以通过Husky
工具实现,husky
是一个git hook
工具,可以帮助我们触发git提交的各个阶段:pre-commit、commit-msg、pre-push
4.1 安装Husky
工具
在window系统中,终端不识别 && 这个符号, 可以采用;或者使用单引号来执行。
// Mac安装 Husky
npx husky-init && npm install
// Windows安装 Husky
npx husky-init ; npm install
npx husky-init '&&' npm install
安装完成后,会自动在根目录下生成.husky
相关文件,这时需要将pre-commit
文件中的npm test
命令改成 npm run lint
,这样我们在执行 git commit
的时候会先执行eslint的校验,并自动代码格式化,然后再提交。
4.2 git
代码提交规范
在多人协同的团队中,规范化的提交信息更易读,便于查找。每个人的 git commit
的信息不一样,没有一个机制就很难保证规范化。而 commitlint
就可以帮助我们解决这个问题。commitlint
是一个自动化工具,它可以用来检查提交约定,如果提交不符合规范,则会拒绝该提交。这些规则是可以配置的。
4.2.1 安装 config-conventional
commitlint
推荐使用 config-conventional
配置去规范 commit
的提交,安装命令如下:
npm install @commitlint/config-conventional @commitlint/cli -D
4.2.2 配置commitlint
在根目录创建commitlint.config.js
文件,配置commitlint
module.exports = {
extends: ['@commitlint/config-conventional'],
};
使用husky生成commit-msg文件,验证提交信息
npx husky add .husky/commit-msg "npx --no-install commitlint --edit $1"
上面这条命令的意思就是在 .husky
文件夹创建一个 commit-msg
文件,然后将npx --no-install commitlint --edit $1
命令写入文件中。后面的$1 表示的是参数。
注意
在windows系统中执行上面的命令可能会报错,无法创建文件,错误如下:
Usage:
husky install [dir] (default: .husky)
husky uninstall
husky set|add [cmd]
这是就需要分开执行,先执行一个创建 commit-msg
文件,命令如下:
npx husky add .husky/commit-msg
然后手动在 commit-msg
文件中添加如下命令:
npx --no-install commitlint --edit
到此就配置完成了。
4.2.3 提交规范
提交格式如下:
git commit -m <type>[optional scope]: <description>
type
:必须,表示提交的改动类型;optional scope
:可选,表示提交的修改范围(main.vue),需要使用括号包裹;description
:必须,表示提交的内容描述。
常见的 type 类型如下:
Type | 作用 |
---|---|
feat | 引入新功能的更改 |
fix | 修补错误的更改 |
docs | 影响文档的更改。 |
style | 代码格式的更改(空格、格式、缺少分号等) |
refactor | 代码重构的更改 |
perf | 优化相关,比如提升性能、体验 |
test | 添加缺失测试或纠正现有测试的更改 |
build | 影响构建组件的更改,如构建工具、依赖项、项目版本等 |
ci | 更改持续集成软件的配置文件和 package 中的 scripts 命令 |
chore | 变更构建流程或辅助工具(比如更改测试环境) |
revert | 还原先前提交的更改 |
4.2.4 测试git规范提交
下面我们再按照之前的方式去提交代码 git commit -m 'message'
就会报错,无法进行提交。
正确的提交方式应该是:
git commit -m 'feat: 增加 xxx 功能'
git commit -m 'feat(xx模块): 增加 yyy 功能'
git commit -m 'fix: 修复 xxx 问题'
附上代码地址:码云代码地址
其他文章