Vite 构建一个 Vue3 TypeScript 项目

Vite 构建一个 Vue3 TypeScript 项目

测试平台（2022年09月07日）

Microsoft Windows [版本 10.0.22000.856]
(c) Microsoft Corporation。保留所有权利。

C:\Users\test>node -v
v16.13.0

C:\Users\test>npm -v
8.1.0

一、使用 vite 模板创建项目

1. 使用模板初始化项目

npm create vite@latest my-vue-app -- --template vue-ts

2. 关联 Git 仓库

git init
git add .
git commit -m "first commit"
git remote add origin <GIT_HTTP_URL>
git push -u origin "master"

3. 安装基础依赖

# node 声明
npm i @types/node -D

# 开发插件
npm i vite-plugin-style-import -D

# 项目依赖
npm i sass pinia vue-router -S

二、配置 vite.config.ts

import { fileURLToPath, URL } from "node:url";

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import {
  createStyleImportPlugin,
  NutuiResolve,
} from "vite-plugin-style-import";

// https://vitejs.dev/config/
export default defineConfig({
  base: "/",
  build: {
    outDir: "build",
    sourcemap: true,
  },
  plugins: [
    vue(),
    createStyleImportPlugin({
      resolves: [NutuiResolve()],
    }),
  ],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData:
          "@import './src/styles/_var.scss';@import './src/styles/_mixins.scss';@import './src/styles/_common.scss';",
      },
    },
  },
  server: {
    port: 9527,
    proxy: {
      "/api": {
        target: "https://api.test.com",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
    },
  },
})

配置 tsconfig.json

{
  "compilerOptions": {
    ...
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  ...
}

三、Git Hook

进行此步时请先确保当前项目已经关联 Git 仓库，否则会抛出类似 fatal: not a git repository 的错误。

3.1 安装 prettier 、ESLint 以及 husky

3.1.1 安装 prettier

npm i prettier -D
npx mrm@2 lint-staged

3.1.2 安装 eslint

npm i eslint -D
npm init @eslint/config
# √ How would you like to use ESLint? · problems
# √ What type of modules does your project use? · esm
# √ Which framework does your project use? · vue
# √ Does your project use TypeScript? · Yes
# √ Where does your code run? · browser
# √ What format do you want your config file to be in? · JSON
# The config that you've selected requires the following dependencies:
#
# eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest @typescript-# eslint/parser@latest
# √ Would you like to install them now? · Yes
# √ Which package manager do you want to use? · npm
# Installing eslint-plugin-vue@latest, @typescript-eslint/eslint-plugin@latest, @typescript-eslint/parser@latest
#
# added 22 packages in 3s
# Successfully created .eslintrc.json file in C:\Workspace\Test\my-vue-app

3.1.3 配置 .eslintrc.json

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:vue/vue3-essential",
    "plugin:@typescript-eslint/recommended"
  ],
  "overrides": [],
  "parser": "vue-eslint-parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "parser": "@typescript-eslint/parser",
    "sourceType": "module"
  },
  "plugins": ["vue", "@typescript-eslint"],
  "rules": {
    "vue/multi-word-component-names": 0
  }
}

3.2 安装 commitlint

npm install --save-dev @commitlint/config-conventional @commitlint/cli

在根目录下新建文件.commitlintrc.json

{
  "extends": ["@commitlint/config-conventional"],
  "rules": {
    "type-enum": [
      2,
      "always",
      ["fix", "feat", "docs", "style", "refactor", "test", "chore", "revert"]
    ]
  }
}

3.3 配置 pre-commit 钩子

首先删除.husky/pre-commit文件，然后执行下方命令：

npx husky add .husky/pre-commit "npx --no-install lint-staged"

3.4 配置 commit-msg 钩子

npx husky add .husky/commit-msg 'npx --no -- commitlint --edit "$1"'

编辑package.json，添加以下配置：

"lint-staged": {
  "*.{vue,ts,tsx,js,jsx}": [
    "eslint --fix",
    "prettier --write"
  ],
  "*.{html,css,scss,md}": [
    "prettier --write"
  ]
}

测试一下 commit 信息：

测试一下提交：

可以看到代码被自动格式化了。

四、源码

• 按照上述步骤创建的完全空白项目：vue-typescript-eslint-template-empty
• 添加部分基础代码的空白项目：vue-typescript-eslint-template

The End. Last Updated by Jimmy, 8 Sep 2022.