Vite项目搭建

创建项目

# 通过vite创建项目
yarn create vite

# 设置js与ts兼容，避免ts引入js模块告警
## vi tsconfig.json
"compilerOptions": {  
  "strict": false,  
  "sourceMap": true,  
  "resolveJsonModule": true,  
  //配置项目打包默认根路径  
  "baseUrl": "/",  
  // 配置路径别名  
  "paths": {  
    "@/*": [  
      "./src/*"  
    ]  
  }  
},

# 设置路径别名
## vi tsconfig.json
resolve: {  
  alias: {  
    "@": path.resolve(__dirname, "./src"),  
  },

优化配置

功能模块

# 自动导入element-plus组件及样式
yarn add unplugin-vue-components  unplugin-auto-import unplugin-icons @iconify/json -D

# icon模块站点
https://icones.netlify.app/
https://icon-sets.iconify.design/
# 复制icon代码时下拉选择i-xxx-xxx格式代码

ts.config.json

{  
  "compilerOptions": {  
    "target": "esnext",  
    "useDefineForClassFields": true,  
    "module": "esnext",  
    "moduleResolution": "node", 
    //允许js与ts混用  
    "strict": false,   
    "jsx": "preserve",  
    "sourceMap": true,  
    "resolveJsonModule": true,
    "esModuleInterop": true,  
    "lib": ["esnext", "dom"],
    //配置项目打包默认根路径
    "baseUrl": ".",  
    // 配置路径别名，需配合vite.config.ts配置使用
    "paths": {
			    "@/**": ["src/**"]
    }
  },  
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],  
  "references": [{ "path": "./tsconfig.node.json" }]  
}

vite.config.ts

import { resolve } from "path";  
import { defineConfig } from "vite";  
import vue from "@vitejs/plugin-vue";  
// 自动按需导入  
import AutoImport from "unplugin-auto-import/vite";  
import Components from "unplugin-vue-components/vite";  
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";  
  
// https://vitejs.dev/config/  
export default defineConfig({  
  server: {  
    port: 9090,  
  },  
  resolve: {  
    alias: [  
      {  
        find: "@",  
        replacement: resolve(__dirname, "src"),  
      },  
    ],  
  },  
  plugins: [  
    vue(),  
    AutoImport({  
      resolvers: [ElementPlusResolver()],  
    }),  
    Components({ resolvers: [ElementPlusResolver()] }),  
  ],  
});