不再迷茫!看了这篇文章让你上手Vue3.0开发有丝滑般体验

7,158 阅读5分钟

小知识,大挑战!本文正在参与「程序员必备小知识」创作活动

本文已参与「掘力星计划」,赢取创作大礼包,挑战创作激励金

graph TD
使用Vite初始化vue3项目 --> chrome扩展插件 --> 配置vscode开发环境 --> 项目代码工程化规范

使用vite初始化vue3+ts项目

1.在控制台输入下面命令安装vite,通过vite去创建vue3项目

npm install vite@lastest

image.png

如果在当前项目根目录安装,则Project name输入./即可

2.选择框架vue

3.选择模版vue-ts image.png

4.然后在当前项目中就能看到下载好的模版文件了

image.png

打开vite.config.ts配置文件,可以看到已经引入了vue的插件@vitejs/plugin-vue

image.png

5.按照相关提示,执行命令安装相应的依赖包并运行项目

image.png

cd vite-project // 进入项目目录
npm install // 安装相关依赖
npm run dev // 执行命令启动项目

启动成功就会在浏览器看到这个页面了,如果启动失败并且报parsing error: unexpected token的错误,则是因为eslint没能正确识别vue3里面的ts语法,可看下面vscode编辑器相应配置解决

image.png

chrome浏览器扩展程序

如上图成功运行vue3项目,但在chrome浏览器用Vue.js devtools识别不了,扩展插件提示Vue.js not detected。搜索相关资料得知,需要额外再安装一个beta版的扩展,扩展地址可点击Vue.js devtools beta下载使用

下载成功并开启插件后,就可以愉快在控制台查看到vue组件啦

image.png

配置vscode开发环境

1.vscode停用Vetur插件,不然会影响vue3语法的识别,如果有安装Vue VSCode Snippets插件也要停用,不然该插件会强制启动Vetur插件

// 通过路径 `Code -> Preferences -> Settings` 中打开vscode配置文件
"vetur.validation.template": false

image.png

2.vscode安装Volar插件

vscode 安装 Vue Language FeaturesTypeScript 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份掘金周边,抽奖详情见活动文章」