本文已参与「
掘力星计划
」，赢取创作大礼包，挑战创作激励金
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插件
"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配置文件，该文件可以是空文件，我们也可以加上自定义一些规则，自定义配置详细规则可点击查看
"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推荐的规则
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配置文件里修改配置就可以正常运行项目啦
parser: 'vue-eslint-parser',
parserOptions: {
parser: '@typescript-eslint/parser',
ecmaVersion: 2020,
sourceType: 'module',
7.这个时候如果打开HelloWorld.vue文件，会发现msg: String这行下面有小波浪，可以通过设置rules，关闭默认值，一般不建议去掉
rules: {
'vue/require-default-prop': 'off',
8.如果希望eslint错误直接在浏览器上显示，可以安装插件vite-plugin-eslint
npm i --save-dev vite-plugin-eslint
并且在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钩子里面执行指定命令
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份掘金周边，抽奖详情见活动文章」
- 65.4w
-
智云健康大前端团队
JavaScript
- 1.5w
-
前端进击者
Vue.js
JavaScript
- 12.4w
-
sam9831
Vue.js
JavaScript
- 3.8w
-
前端劝退师
Vue.js
TypeScript
- 8.5w
-
MarkerHub
Spring Boot
