手把手教你用 vite+vue3+ts+pinia+vueuse 打造大厂企业级前端项目

前言

前天有幸看了尤雨溪 、月影、 郭辉、屈光宇 几位大佬的 《畅聊 Vue 3.0 & 前端技术新趋势》，属实 vue3 生态周边大全 的一波好家伙给震撼到了；

虽然我看直播中说的最多的是 别更新了，学不动了 , 但是身为前端搬砖大师，又有多少人已经暗暗的卷起来了呢？

所以特意给大家准备了 vue3 项目周边 一条龙服务 特意打包带给大家

通过这篇文章你可以学到

• 如何使用使用 Vite 搭建项目
• 如何在 Vite 中集成 typescript
• 如何在 Vite 中集成 vue-router4 和 pinia
• 如何使用 vue3 的伴侣 vueuse
• 如何在项目中集成 eslint 和 prettier 保证代码质量
• 如何规范化 git 提交信息
• 如何为团队开发专属的项目模板

环境依赖版本

• node：v14.15.4
• vite：^2.8.0
• vue：^3.2.25
• typescript：^4.5.4
• pinia：^2.0.12
• vue-router：^4.0.14
• vueuse：^8.2.0
• eslint：^8.12.0
• prettier：^2.6.1
• commitizen：
• husky：^7.0.4

快速查看

• 仓库地址

长话短说，直接开干 ~

1. 初始化项目

按步骤提示初始化：

1. 使用 vite-cli 命令

# pnpm
pnpm create vite

# npm
npm init vite@latest

# yarn
yarn create vite

2. 输入项目名：

? Project name:  vite-vue3-ts-pinia

3. 选择一个框架（vue）

? Select a framework: » - Use arrow-keys. Return to submit.
     vanilla // 原生js
 >   vue     // 默认就是 vue3
     react   // react
     preact  // 轻量化react框架
     lit     // 轻量级web组件
     svelte  // svelte框架

4. 使用 typescript

? Select a variant: › - Use arrow-keys. Return to submit.
     vue
 ❯   vue-ts

5. 启动项目

cd vite-vue3-ts-pinia && pnpm install && pnpm run dev

快速初始化（建议使用）：

# pnpm
pnpm create vite project-name -- --template vue-ts

# npm 6.x
npm init vite@latest project-name --template vue-ts
 
# npm 7+, 需要额外的双横线：
npm init vite@latest project-name -- --template vue-ts
 
# yarn
yarn create vite project-name --template vue-ts

集成配置

1. 为保证 node 的使用

pnpm i @types/node --save-dev

2. 修改 tsconfig.json

{
   
  "compilerOptions": {
   
    "typeRoots": [
      "node_modules/@types", // 默认值
      "src/types"
   ],
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "baseUrl": "./",
    "paths":{
   
      "@": ["src"],
      "@/*": ["src/*"],
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

3. 修改 vite.config.ts

import {
    defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import * as path from 'path';

// https://vitejs.dev/config/
export default defineConfig({
   
    resolve: {
   
        //设置别名
        alias: {
   
            '@': path.resolve(__dirname, 'src')
        }
    },
    plugins: [vue()],
    server: {
   
        port: 8080, //启动端口
        hmr: {
   
            host: '127.0.0.1',
            port: 8080
        },
        // 设置 https 代理
        proxy: {
   
            '/api': {
   
                target: 'your https address',
                changeOrigin: true,
                rewrite: (path: string) => path.replace(/^\/api/, '')
            }
        }
    }
});

2. 代码质量风格的统一

集成 eslint

1. 安装

pnpm i eslint eslint-plugin-vue --save-dev

由于 ESLint 默认使用 Espree 进行语法解析，无法识别 TypeScript 的一些语法，故我们需要安装 @typescript-eslint/parser 替代掉默认的解析器

pnpm install @typescript-eslint/parser --save-dev

安装对应的插件 @typescript-eslint/eslint-plugin 它作为 eslint 默认规则的补充，提供了一些额外的适用于 ts 语法的规则。

pnpm install @typescript-eslint/eslint-plugin --save-dev

2. 创建配置文件： .eslintrc.js 或 .eslintrc.json

module.exports = {
   
    parser: 'vue-eslint-parser',

    parserOptions: {
   
        parser: '@typescript-eslint/parser',
        ecmaVersion: 2020,
        sourceType: 'module',
        ecmaFeatures: {
   
            jsx: true
        }
    },

    extends: [
        'plugin:vue/vue3-recommended',
        'plugin:@typescript-eslint/recommended',
    ],

    rules: {
   
        // override/add rules settings here, such as:
    }
};

3. 创建忽略文件：.eslintignore

node_modules/
dist/
index.html

4. 命令行式运行：修改 package.json

{
   
    ...
    "scripts": {
   
        ...
        "eslint:comment": "使用 ESLint 检查并自动修复 src 目录下所有扩展名为 .js 和 .vue 的文件",
        "eslint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src",
    }
    ...
}

集成 prettier

1. 安装

pnpm i prettier eslint-config-prettier eslint-plugin-prettier --save-dev

2. 创建配置文件： prettier.config.js 或 .prettierrc.js

module.exports = {
   
    // 一行最多 80 字符
    printWidth: 80,
    // 使用 4 个空格缩进
    tabWidth:</