Vite + Vue3 + Typescript配置Vue3 ts项目基础开发框架

本基础开发框架包含：

1. eslint代码检查
2. prettier格式化*.js、*.ts、*.jsx、*.tsx、*.vue、*.css、*.less、*.scss等文件
3. 文件保存时自动格式化代码
4. commitlint规范git提交信息
5. 支持SFC、jsx、tsx混用
6. 路由权限验证
7. 暂时使用ant-design-vue@2.2.8作为UI组件库

源码

初始化项目

See: vite

# npm 6.x
npm create vite@latest projectName --template vue

# npm 7+
npm create vite@latest projectName -- --template vue

# yarn
yarn create vite projectName --template vue

# pnpm
pnpm create vite projectName -- --template vue

本项目使用yarn

目录结构为：

projectName
├── .vscode
│	└── extensions.json
├── public
│	└── favicon.ico
├── src
│	├── assets
│	│	└── logo.png
│	├── components
│	│	└── HelloWorld.vue
│	├── App.vue
│	└── main.js
├── .gitignore
├── index.html
├── package.json
├── README.md
└── vite.config.js

配置eslint和prettier

配置eslint

See: eslint

npm install eslint -D
# or
yarn add eslint -D

然后创建配置文件：

npm init @eslint/config
# or
yarn create @eslint/config

依次选择：

• To check syntax and find problems
• Javascript modules (import/export)
• Vue.js
• Yes
• Browser
• Javascript
• Yes

生成配置文件.eslintrc.js：

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    "eslint:recommended",
    "plugin:vue/essential",
    "plugin:@typescript-eslint/recommended",
  ],
  parserOptions: {
    ecmaVersion: "latest",
    parser: "@typescript-eslint/parser",
    sourceType: "module",
  },
  plugins: ["vue", "@typescript-eslint"],
  rules: {},
};

• vue3不需要单个根元素，将plugin:vue/essential改为plugin:vue/vue3-essential
• 配置对vue3的<script setup>块的支持，添加parser: 'vue-eslint-parser'
• 让vue3的<script setup>块不需要导入defineProps，在env选项中添加'vue/setup-compiler-macros': true
• 配置对于node、commonjs、amd模块的支持，在env选项中添加node: true、commonjs: true、amd: true
• 配置对于jsx的语法支持，在parserOptions选项中添加ecmaFeatures: { jsx: true }
• 添加.eslintignore文件，忽略dist文件夹和*.html文件

配置prettier

See: prettier

npm install --save-dev --save-exact prettier
# or
yarn add --dev --exact prettier

然后根目录创建.prettierrc.json，本项目的配置如下：

{
  "arrowParens": "avoid",
  "semi": false,
  "singleQuote": true,
  "trailingComma": "es5",
  "quoteProps": "as-needed",
  "tabWidth": 2
}

然后创建.prettierignore，添加需要忽略的文件或文件夹

处理eslint和prettier的冲突

安装eslint-config-prettier：

npm install -D eslint-config-prettier
# or
yarn add -D eslint-config-prettier

然后在.eslintrc.js的extends的最后添加prettier

配置git hooks和commitlint

配置git hooks

See: lint-staged

首先初始化git

git init

然后安装husky和lint-staged

npx mrm@2 lint-staged

需要将package.json中的"*.js": "eslint --cache --fix"改为"*.js": "eslint --fix"，否则每次提交会生成一个缓存文件

然后在package.json中的lint-staged中添加对于*.ts、*.vue、*.tsx、*.less、*.scss等文件的格式化支持，现在提交代码的时候会自动格式化改动的文件

配置commitlint

防止git的commit信息混乱，使用commitlint规范提交信息，See: commitlint

npm install --save-dev @commitlint/config-conventional @commitlint/cli
# or
yarn add -D @commitlint/config-conventional @commitlint/cli

创建配置文件，本项目选择commitlint.config.js：

module.exports = {
  extends: ['@commitlint/config-conventional'],
  ignores: [commit => commit.includes('init')],
  rules: {
    'body-leading-blank': [2, 'always'],
    'footer-leading-blank': [1, 'always'],
    'header-max-length': [2, 'always', 108],
    'subject-empty': [2, 'never'],
    'type-empty': [2, 'never'],
    'type-enum': [
      2,
      'always',
      [
        'feat',
        'fix',
        'perf',
        'refactor',
        'style',
        'docs',
        'test',
        'build',
        'ci',
        'chore',
        'revert',
        'types',
        'wip',
      ],
    ],
  },
}

添加hooks

npx husky add .husky/commit-msg 'npx --no -- commitlint --edit $1'
# or
yarn husky add .husky/commit-msg 'yarn commitlint --edit $1'

配置vite

配置对于jsx语法的支持

安装@vitejs/plugin-vue-jsx

npm install -D @vitejs/plugin-vue-jsx
# or
yarn add -D @vitejs/plugin-vue-jsx

现在可以将vite.config.js改成vite.config.ts，并添加：

// vite.config.ts
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

export default defineConfig({
  plugins: [vue(), vueJsx()],
})

为*.vue文件添加声明

src目录下添加env.d.ts声明文件，为*.vue文件添加声明，同时将vite的类型定义暴露给前端代码：

/// <reference types="vite/client" />

declare module '*.vue' {
  import { DefineComponent } from 'vue'
  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
  const component: DefineComponent<{}, {}, any>
  export default component
}

然后在项目根目录添加tsconfig.json：

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "isolatedModules": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "strict": true,
    "jsx": "preserve",
    "allowJs": true,
    "checkJs": true,
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    "lib": ["esnext", "dom"],
    "types": ["vite/client"]
  },
  "include": ["src/**/*.ts", "src/**/*d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "exclude": ["node_modules"]
}

配置路径别名

// vite.config.ts
import path from 'path'

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    },
  },
})

配置环境变量

在项目根目录下创建.env.local、.env.test、.env.gray、.env.prod，分别表示本地开发环境、测试服、灰度或预生产、生产环境，文件内容为key=value的形式，其中key要以VITE_开头的形式，See: vite环境变量，可以使用#添加注释

然后，修改vite.config.ts：

// vite.config.ts
import path from 'path'
import { defineConfig, loadEnv, UserConfig } from 'vite'

export default defineConfig(({ command, mode }) => {
  // 向`process.env`写入环境变量
  process.env = { ...process.env, ...loadEnv(mode, process.cwd()) }

  const IS_PROD = command === 'build'

  const config: UserConfig = {
    base: IS_PROD ? '/' : '/', // 根据实际情况配置
    plugins: [
      vue(),
      vueJsx(),
    ],
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src'),
      },
    },
  }

  if (!IS_PROD) {
    // 开发环境独有配置
  } else {
    // 生产环境独有配置
  }

  return config
})

配置vscode

• 安装Volar扩展插件，将Vetur禁用（可以在本工作空间workspace中禁用），Volar是vscode对vue3支持的插件

• 在.vscode文件夹下添加settings.json：

  {
    "editor.formatOnSave": true,
    "eslint.validate": ["html", "vue", "javascript", "jsx", "ts", "tsx"],
    "eslint.format.enable": true,
    "editor.codeActionsOnSave": {
      "source.fixAll": true
    },
    "[javascript]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascriptreact]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[json]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[scss]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
  }
  

到这里，项目基础配置差不多了，接下来可以根据需要配置vuex、vue-router、UI 组件等