vue3+vite+element-plus（一）- 搭建项目

最近新开发的项目使用 vue3，本着 “好记性不如烂笔头” 的想法，决定将项目搭建的过程及其中遇到的问题记录下来。

一、项目初始化

npm init vite my-vue3-app

选择 vue, 按 enter;
选择 typescript 按 enter;

cd my-vue3-app

安装初始化依赖

npm i

二、按需引入 element-plus

官方推荐按需引入 element-plus 和自动导入图标

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

npm i -D unplugin-vue-components unplugin-auto-import unplugin-icons

配置 vite.config.ts

// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
import AutoImport from 'unplugin-auto-import/vite';
import Icons from 'unplugin-icons/vite';
import IconsResolver from 'unplugin-icons/resolver';

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        Components({
            resolvers: [
                ElementPlusResolver(),
                IconsResolver({ enabledCollections: ['ep'] }),
            ],
        }),
        AutoImport({
            imports: ['vue'],
            resolvers: [
                ElementPlusResolver(), 
                IconsResolver({ prefix: 'Icon' }),
            ],
        }),
        Icons({
            autoInstall: true,
        }),
    ],
});

设置 alias

npm i -D @types/node

修改 vite.config.ts

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

const resolve = (dir) => path.resolve(__dirname, dir);

export default defineConfig({
    base: './',
    resolve: {
        alias: {
            '@': resolve('src'),
        },
    },
});

修改 tsconfig.json

// tsconfig.json
{
    "compilerOptions": {
        // ...other codes
        "baseUrl": "./",
        "paths": {
            "@/*": ["src/*"]
        }
    },
}

三、问题记录

1，element-plus 组件没有代码提示

解决方案：配置tsconfig.json

// tsconfig.json
{
    "compilerOptions": {
        // ...other codes
        "types": ["element-plus/global"]
    },
}

效果图：

2，使用图标

由于使用的自动导入图标，图标组件需要加上 i-ep- 前缀；例如 <Plus /> 图标需要使用：

<i-ep-plus />

3，修改组件默认颜色

可以使用 css 变量修改组件的默认颜色。

npm i -D sass

新建 src/style/index.scss

// src/style/index.scss

body {
    --el-text-color-primary: #383838;
    --el-color-primary: #1b90ff;
    
    --font-gray-1: rgba(0, 0, 0, 0.26);
    --font-gray-2: rgba(0, 0, 0, 0.4);
    --font-gray-3: rgba(0, 0, 0, 0.6);
    --font-gray-4: rgba(0, 0, 0, 0.9);

    .el-table {
        --el-table-header-text-color: var(--font-gray-2);
        --el-table-text-color: var(--font-gray-4);
    }
}

4，使用ElMessage 和 ElMessageBox

由于是按需引入，使用 ElMessage 和 ElMessageBox 时，ts 会提示找不到名称：

这个报错虽然不影响正常开发，但个人觉得这根红色波浪线有一点点刺眼。
解决方案：

修改 tsconfig.json

// tsconfig.json
{
    // ...other codes
    "include": [
        "src/**/*.ts",
        "src/**/*.d.ts",
        "src/**/*.tsx",
        "src/**/*.vue",
        "auto-imports.d.ts",  // 新增
        "components.d.ts"  // 新增
    ],
}

5，tsconfig.node.json文件报红

这个也是ts报错，但不影响正常开发。解决方案：

修改 tsconfig.node.json

// tsconfig.node.json
{
    "compilerOptions": {
        "target": "ESNext", // 新增
        "composite": true,
        "module": "ESNext",
        "moduleResolution": "Node",
        "allowSyntheticDefaultImports": true
    },
    "include": ["vite.config.ts"]
}

6，语言配置 报红

又是一个ts报错，但不影响开发的问题。

解决方案
根目录下新增 env.d.ts

// env.d.ts
declare module 'element-plus/es/locale/index.mjs';

修改 tsconfig.json

// tsconfig.json
{
    // ...other codes
    "include": [
        "src/**/*.ts",
        "src/**/*.d.ts",
        "src/**/*.tsx",
        "src/**/*.vue",
        "auto-imports.d.ts",
        "components.d.ts",
        "env.d.ts"  // 新增
    ],
}

7，使用 defineOptions

有些时候我们想给自定义组件添加 name 属性，又不想放弃使用 <script setup> 语法糖，就需要使用defineOptions

解决方案

npm i -D unplugin-vue-define-options

修改 vite.config.ts

// vite.config.ts

// ...other codes
import DefineOptions from 'unplugin-vue-define-options/vite';
export default defineConfig({
    plugin: [
        // ...other codes
        DefineOptions(),
    ],
});