用 vite 构建 vue3 + TS 项目实战

VIP文章 Daisy__yangyang

已于 2022-04-26 17:07:34 修改

阅读量1.3w

点赞数 10

分类专栏： vite Nodejs TypeScript 文章标签：前端

于 2022-04-26 14:47:38 首次发布

本文链接：https://blog.csdn.net/weixin_37883657/article/details/123984432

版权

8、Vue3中的script-setup语法

1、项目初始化

npm install [email protected] -g // 全局安装 create-vite
npm init @vitejs/app shop-admin // 初始化项目(shop-admin 项目名)
cd shop-admin
npm install
npm run dev

2、eslint 基础配置

npm install eslint --save-dev
npm install @eslint/create-config@latest -D
npm init @eslint/config

修改 .eslintrc.js的配置，修改为 'plugin:vue/vue3-strongly-recommended'（适用于 vue3版本的eslint）

在 npm scripts 中添加验证脚本："lint": "eslint src/**/*.{js,jsx,vue,ts,tsx} --fix"

在vscode编辑器扩展中禁用 Vetur
在vscode编辑器扩展中安装 eslint 插件
在vscode编辑器扩展中安装Vue Language Features (Volar)
进入 vscode 首选项---设置中---扩展---Eslint，勾选Format格式化如下图

npx使用教程：npx 使用教程 - 阮一峰的网络日志

3、配置 git commit hook

在代码提交之前，进行代码规则检查能够确保进入git库的代码都是符合代码规则的。但是整个项目上运行lint速度会很慢，lint-staged能够让lint只检测暂存区的文件，所以速度很快。

lint-staged官网：https://github.com/okonet/lint-staged#readme
安装：npx mrm@2 lint-staged（如果安装报错，看这篇文章npx mrm@2 lint-staged执行报错_Daisy__yangyang的博客-CSDN博客）
配置 prepare、lint-staged

// package.json
{
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "serve": "vite preview",
    "tsc": "vue-tsc --noEmit",
    "lint": "eslint ./src/**/*.ts ./src/**/*.vue --cache --fix",
    "prepare": "husky install"
  },
  "lint-staged": {
    "*.{js,jsx,vue,ts,tsx}": [
      "npm run lint",
      // "git add" 之前的版本需要手动把 lint 过程中修改的代码手动 add，新版本不需要了
    ]
  }
}

4、在开发和构建中进行代码规范校验

插件二选一：

安装 vite-eslint-plugin：npm install vite-plugin-eslint -D

在 vite.config.ts 配置插件：

// vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import eslintPlugin from 'vite-plugin-eslint'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    eslintPlugin({
      cache: false
    })
  ]
})