小知识,大挑战!本文正在参与「程序员必备小知识」创作活动
本文已参与「掘力星计划」,赢取创作大礼包,挑战创作激励金
graph TD
使用Vite初始化vue3项目 --> chrome扩展插件 --> 配置vscode开发环境 --> 项目代码工程化规范
使用vite初始化vue3+ts项目
1.在控制台输入下面命令安装vite,通过vite去创建vue3项目
npm install vite@lastest
如果在当前项目根目录安装,则Project name输入./
即可
2.选择框架vue
3.选择模版vue-ts
4.然后在当前项目中就能看到下载好的模版文件了
打开vite.config.ts
配置文件,可以看到已经引入了vue的插件@vitejs/plugin-vue
5.按照相关提示,执行命令安装相应的依赖包并运行项目
cd vite-project // 进入项目目录
npm install // 安装相关依赖
npm run dev // 执行命令启动项目
启动成功就会在浏览器看到这个页面了,如果启动失败并且报parsing error: unexpected token
的错误,则是因为eslint没能正确识别vue3里面的ts语法,可看下面vscode编辑器相应配置解决
chrome浏览器扩展程序
如上图成功运行vue3项目,但在chrome浏览器用Vue.js devtools识别不了,扩展插件提示Vue.js not detected。搜索相关资料得知,需要额外再安装一个beta版
的扩展,扩展地址可点击Vue.js devtools beta下载使用
下载成功并开启插件后,就可以愉快在控制台查看到vue组件啦
配置vscode开发环境
1.vscode停用Vetur
插件,不然会影响vue3语法的识别,如果有安装Vue VSCode Snippets
插件也要停用,不然该插件会强制启动Vetur
插件
// 通过路径 `Code -> Preferences -> Settings` 中打开vscode配置文件
"vetur.validation.template": false
2.vscode安装Volar
插件
vscode 安装 Vue Language Features
和 TypeScript Vue Plugin
这两个插件用于识别vue3里的最新语法及vue3里的ts语法
3.vscode安装eslint
插件
平时开发过程中,相信大家都有一定使用ESlint的经验,ESlint可以执行双重任务校验语法规则和格式化代码,尽管ESlint可以格式化工具,但另一个Prettier插件更加全面,ESlint只能支持格式化js,但Prettier可以格式化vue,html,css等格式的文件,并且Prettier更符合全行业的规范。而且ESlint和Prettier可以搭配在一起使用,更好地满足我们校验和格式化代码的需求
通过路径 Code -> Preferences -> Settings
中打开vscode配置文件,设置eslint插件配置,以及打开保存时自动修复的配置,如下图
"editor.formatOnSave": true,
"eslint.autoFixOnSave": true,
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "html",
"autoFix": true
},
{
"language": "vue",
"autoFix": true
},
{
"language": "typescript",
"autoFix": true
},
{
"language": "typescriptreact",
"autoFix": true
}
],
这样设置后,在开发过程中可以实时看到代码错误,开发效率更为高效
4.vscode安装Prettier插件
注意解决Eslint插件和Prettier插件自动保存的冲突,保持ESlint配置和Prettier配置一致即可,如是否用单引号,末尾是否加分号等设置
项目代码工程化规范
1.通过npm安装Prettier
插件格式化代码
npm install --save-dev --save-exact prettier
--save-exact是为了安装精确地安装指定版本,版本前面没带^的
2.然后在根目录创建.prettierrc.json
配置文件,该文件可以是空文件,我们也可以加上自定义一些规则,自定义配置详细规则可点击查看
// .prettierrc.json
{
"singleQuote": true,
"semi": true,
"printWidth": 120
}
vscode里的ESlint插件和Prettier插件会优先以项目的配置文件(如.prettierrc.json)为准
3.npm安装相关ESlint
插件
npm install --save-dev eslint eslint-plugin-vue eslint-config-prettier
4.在根目录创建ESlint配置文件.eslintrc.js
,使用vue3推荐的规则
// .eslintrc.js
module.exports = {
env: {
node: true,
},
extends: ['eslint:recommended', 'plugin:vue/vue3-recommended', 'prettier'],
rules: {
},
};
5.在package.json
的script添加命令
"scripts": {
// ...
"lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src",
"format": "prettier . --write",
},
就可以通过命令行去格式化项目代码啦,并且可以通过husky等插件工具在打包时执行
6.此时运行项目文件,运行不成功,报parsing error: unexpected token
的错误,是因为eslint无法识别vue文件里的ts语法导致的,可安装@typescript-eslint/parser
插件解决
npm install @typescript-eslint/parser
并在eslint配置文件里修改配置就可以正常运行项目啦
// .eslintrc.js
parser: 'vue-eslint-parser',
parserOptions: {
parser: '@typescript-eslint/parser',
ecmaVersion: 2020,
sourceType: 'module',
},
7.这个时候如果打开HelloWorld.vue
文件,会发现msg: String这行下面有小波浪,可以通过设置rules,关闭默认值,一般不建议去掉
// .eslintrc.js
rules: {
'vue/require-default-prop': 'off',
}
8.如果希望eslint错误直接在浏览器上显示,可以安装插件vite-plugin-eslint
npm i --save-dev vite-plugin-eslint
并且在vite.congfig.ts
里配置就可以啦
// vite.congfig.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import eslintPlugin from 'vite-plugin-eslint';
export default defineConfig({
plugins: [vue(), eslintPlugin()],
});
9.我们会希望在上传提交git代码时做代码规范检查以及格式化,可以安装husky
插件去在git钩子里面执行指定命令
// 需要先初始化一下git环境,如果没有则先执行git init
npm install --save-dev husky
npx husky install
npx是调用项目内部的安装模块哦
在.husky
文件下创建pre-commit
文件
npx husky add .husky/commit-msg
在pre-commit
项目里面加上上面的创建的两条命令
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npm run format
npm run lint
在提交代码执行git commit时就可以看见先执行prettier代码,再执行校验代码的操作,保证提交的代码都是符合规范的,如果校验不通过会不允许提交的
最后
以上是我使用vite创建vue3项目开发配置过程中的一些小心得,希望能对大家有帮助~如果对大家有一点点小启发,希望能获得你的一个赞哦~~大家多在评论区留言一起交流探讨吧嘻嘻
更多文章推荐:
「HTTP响应头之内容安全策略(CSP)为你的网站保驾护航」
「三分钟学会使用requestAnimationFrame实现倒计时」
「欢迎在评论区讨论,掘金官方将在掘力星计划活动结束后,在评论区抽送100份掘金周边,抽奖详情见活动文章」