不再迷茫！看了这篇文章让你上手Vue3.0开发有丝滑般体验 |
您所在的位置：网站首页 › vscode安装vue插件 › 不再迷茫！看了这篇文章让你上手Vue3.0开发有丝滑般体验 |
不再迷茫！看了这篇文章让你上手Vue3.0开发有丝滑般体验
|
小知识，大挑战！本文正在参与「程序员必备小知识」创作活动 本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金 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.按照相关提示，执行命令安装相应的依赖包并运行项目 启动成功就会在浏览器看到这个页面了，如果启动失败并且报parsing error: unexpected token的错误，则是因为eslint没能正确识别vue3里面的ts语法，可看下面vscode编辑器相应配置解决 如上图成功运行vue3项目，但在chrome浏览器用Vue.js devtools识别不了，扩展插件提示Vue.js not detected。搜索相关资料得知，需要额外再安装一个beta版的扩展，扩展地址可点击Vue.js devtools beta下载使用 下载成功并开启插件后，就可以愉快在控制台查看到vue组件啦 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份掘金周边，抽奖详情见活动文章」 |
【本文地址】
今日新闻 |
推荐新闻 |