Vue3+Typescript+Vite5.0 前端项目配置

一、初始化项目

1. node版本要求

node：v18.19.0

2. vscode插件安装

Vue - Official，Prettier - Code formatter，ESlint

提示：vscode在文件中通过鼠标右击，选择使用...格式化文档，将prettier插件设为默认值

3. 创建项目

npm create vite@latest vite-vue-ts-seed -- --template vue-ts

4. 安装项目依赖

npm install

5. 运行项目

npm run dev

二、配置路径别名

1. 安装

npm install @types/node -D

2. 修改vite.config.ts

// vite.config.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path"; //这个path用到了上面安装的@types/node

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  //这里进行配置别名
  resolve: {
    alias: {
      "@": path.resolve(__dirname,"src"), // @代替src
    },
  },
});

3. ts 路径映射，修改 tsconfig.json

// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": "./", // 解析非相对模块的基地址，默认是当前目录
    "paths": { //路径映射，相对于baseUrl
      "@/*": ["src/*"] 
    },
    "allowSyntheticDefaultImports": true // 允许默认导入
  }
}

三、配置 tsconfig

1. 修改tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext", // 将代码编译为最新版本的 JS
    "module": "ESNext", // 使用 ES Module 格式打包编译后的文件
    "lib": ["ESNext", "DOM", "DOM.Iterable"], // 引入 ES 最新特性和 DOM 接口的类型定义
    "skipLibCheck": true, // 跳过对 .d.ts 文件的类型检查

    "moduleResolution": "node", // 使用 Node 的模块解析策略
    "resolveJsonModule": true, // 允许引入 JSON 文件
    "isolatedModules": true, // 要求所有文件都是 ES Module 模块。
    "noEmit": true, // 不输出文件,即编译后不会生成任何js文件
    "jsx": "preserve", // 保留原始的 JSX 代码，不进行编译

    "strict": true, // 开启所有严格的类型检查
    "noUnusedLocals": true, //报告未使用的局部变量的错误
    "noUnusedParameters": true, //报告函数中未使用参数的错误
    "noFallthroughCasesInSwitch": true, //确保switch语句中的任何非空情况都包含

    "esModuleInterop": true, // 允许使用 import 引入使用 export = 导出的内容
    "allowJs": true, //允许使用js
    "baseUrl": ".", //查询的基础路径
    "paths": { "@/*": ["src/*"], "#/*": ["types/*"] } //路径映射,配合别名使用
  },
  //需要检测的文件
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }] //为文件进行不同配置
}

2. 修改tsconfig.node.json

{
  "compilerOptions": {
    "composite": true,
    "skipLibCheck": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.ts"]
}

3. 新建 src/typings.d.ts（在src文件夹下新建）

//声明window上自定义属性，如事件总线
declare interface Window {
  eventBus: any;
}

//声明.vue文件
declare module "*.vue" {
  import { DefineComponent } from "vue";
  const component: DefineComponent<object, object, any>;
  export default component;
}

4. 修改package.json

"scripts": {
    "ts": "vue-tsc --noEmit",
},

运行 npm install ts 即可查看文件是否有ts类型错误

四、配置 ESLint 和 prettier

1. 安装

//eslint 安装
npm install eslint@^8.39.0 -D

//eslint vue插件安装
npm install eslint-plugin-vue@^9.11.0 -D

//eslint 识别ts语法
npm install @typescript-eslint/parser@^6.19.0 -D

//eslint ts默认规则补充
npm install @typescript-eslint/eslint-plugin@^6.19.0 -D

//eslint prettier插件安装
npm install eslint-plugin-prettier@^5.1.3 -D

//用来解决与eslint的冲突
npm install eslint-config-prettier@^9.1.0 -D 

//安装prettier
npm install prettier@^3.2.4 -D

2. 新建 .eslintrc

{
  "env": {
    "browser": true,
    "node": true,
    "es2021": true
  },
  "parser": "vue-eslint-parser",
  "extends": [
    "eslint:recommended",
    "plugin:vue/vue3-recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended",
    "eslint-config-prettier"
  ],
  "parserOptions": {
    "ecmaVersion": "latest",
    "parser": "@typescript-eslint/parser",
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "plugins": ["vue", "@typescript-eslint", "prettier"],
  "rules": {
    "vue/multi-word-component-names": "off", // 禁用vue文件强制多个单词命名
    "@typescript-eslint/no-explicit-any": ["off"], //允许使用any
    "@typescript-eslint/no-this-alias": [
      "error",
      {
        "allowedNames": ["that"] // this可用的局部变量名称
      }
    ],
    "@typescript-eslint/ban-ts-comment": "off", //允许使用@ts-ignore
    "@typescript-eslint/no-non-null-assertion": "off", //允许使用非空断言
    "no-console": [
      //提交时不允许有console.log
      "warn",
      {
        "allow": ["warn", "error"]
      }
    ],
    "no-debugger": "warn" //提交时不允许有debugger
  }
}

3. 新建 .eslintignore

# eslint 忽略检查 (根据项目需要自行添加)
node_modules
dist

4. 新建 .prettierrc

{
    "endOfLine": "auto",
    "printWidth": 120,
    "semi": true,
    "singleQuote": true,
    "tabWidth": 2,
    "trailingComma": "all",
    "bracketSpacing": true
}

5. 新建 .prettierignore

# 忽略格式化文件 (根据项目需要自行添加)
node_modules
dist

6. 重启vscode使配置生效

7. 配置package.json

"scripts": {
    "lint": "eslint src --fix --ext .ts,.tsx,.vue,.js,.jsx --max-warnings 0"
},

五、配置scss

1. 安装

npm install sass -D

2. 配置全局 scss 样式文件

(1) 新建 src/assets/styles/index.scss

$test-color: red;

(2) 配置vite.config.ts

css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@import "@/assets/styles/index.scss";',
      },
    },
  },

(3) 组件中使用

<style lang="scss">
body {
  color: $test-color;
}
</style>

六、配置 element-plus

1. 安装

npm install element-plus 
npm install @element-plus/icons-vue

2. 按需引入插件

npm install unplugin-vue-components -D
npm install unplugin-auto-import -D

3. 配置vite.config.ts

// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

4. 在main.ts引入

注意：按需引入时element-plus不需要在main.ts中引入，插件会自动挂载处理，可以在全局直接使用

这里在main.ts中引入element-plus样式与图标

import * as ElementPlusIconsVue from '@element-plus/icons-vue'; //引入图标
import 'element-plus/dist/index.css'; //引入样式

//...

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component);
}

七、配置axios

1. 安装

npm install axios

2. 新建utils/axios.ts

import axios from 'axios';

/*
 * 创建实例
 * 与后端服务通信
 */
const HttpClient = axios.create({
  baseURL: import.meta.env.VITE_BASE_URL,
});

/**
 * 请求拦截器
 * 功能：配置请求头
 */
HttpClient.interceptors.request.use(
  (config) => {
    const token = '222';
    config.headers.authorization = 'Bearer ' + token;
    return config;
  },
  (error) => {
    console.error('网络错误，请稍后重试');
    return Promise.reject(error);
  },
);

/**
 * 响应拦截器
 * 功能：处理异常
 */
HttpClient.interceptors.response.use(
  (config) => {
    return config;
  },
  (error) => {
    return Promise.reject(error);
  },
);

export default HttpClient;

3. 新建apis/model/userModel.ts

定义请求参数类型与返回数据类型

//定义请求参数
export interface ListParams {
  id: number; //用户id
}

export interface RowItem {
  id: number; //文件id
  fileName: string; //文件名
}

//定义接口返回数据
export interface ListModel {
  code: number;
  data: RowItem[];
}

4. 新建apis/user.ts

import HttpClient from '../utils/axios';
import type { ListParams, ListModel } from './model/userModel';

export const getList = (params: ListParams) => {
  return HttpClient.get<ListModel>('/list', { params });
};

5. 使用

<script setup lang="ts">
import { getList } from '@/apis/user';

getList({ id: 2 });
</script>

八、vscode 保存自动格式化

在.vscode下新建 settings.json

{
  "editor.codeActionsOnSave": {
    "source.fixAll": "explicit"
  }
}

九、配置端口与代理

修改vite.config.ts

export default defineConfig({
    ...
  server: {
    host: '0.0.0.0',
    port: 8080, 
    open: true,
    https: false,
    proxy: {
      '/api': {
        target: '要代理的地址',
        changeOrigin: true,
        ws: true,
        rewrite: (path: string) => path.replace(/^\/api/, ''),
      },
    },
  },
  });

十、打包配置

修改vite.config.ts

1. 分包

通过() => import()形式加载的组件会自动分包，第三方插件需手动分包

build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vue: ['vue', 'pinia', 'vue-router'],
          elementIcons: ['@element-plus/icons-vue'],
        },
      },
    },
  },

2. 生成.gz文件

(1) 安装

npm install vite-plugin-compression -D

(2) 修改vite.config.ts

默认情况下插件在开发 (serve) 和生产 (build) 模式中都会调用，使用 apply 属性指明它们仅在 'build' 或 'serve' 模式时调用

这里打包生成 .gz 插件仅需在打包时使用

import viteCompression from 'vite-plugin-compression'

  plugins: [
    //...
    {
      ...viteCompression(),
      apply: 'build',
    },
  ],

3. js和css文件夹分离

export default defineConfig({
    build: {
      rollupOptions: {
        output: {
          chunkFileNames: "static/js/[name]-[hash].js",
          entryFileNames: "static/js/[name]-[hash].js",
          assetFileNames: "static/[ext]/[name]-[hash].[ext]",
        },
      },
    },
  });

4. 分析生成包的大小

(1) 安装

npm install rollup-plugin-visualizer

(2) 修改vite.config.ts

import { visualizer } from 'rollup-plugin-visualizer';

  plugins: [
    //...
    visualizer({ open: true }),
  ],