Vue3.2+Vite2.x+Typescript项目进阶搭建-Element-plus

前言：该文没有全局引入的方式讲解 官方文档：

安装淘宝镜像（非必须）

先安装好淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org 

cnpm install node-sass --save  

遇到错误 cnpm : 无法加载文件D:\nodejs\node_global\cnpm.ps1,因为在此系统上禁止运行，参考博客：https://blog.csdn.net/weixin_45809419/article/details/106075595

安装element-plus依赖

#用这个命令！！！
vue add element-plus 

image.png

Volar 支持#

如果您使用 Volar，请在 tsconfig.json 中通过 compilerOptions.type 指定全局组件类型。

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

按需导入（unplugin-vue-components ）+自动导入（unplugin-auto-import）配置

引入依赖

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

vue.config.ts 添加以下配置（Webpack官方文档也有）

// vite.config.ts
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({
  plugins: [
    vue(), // ...
    AutoImport({
      imports: [
        // 自动导入vue相关函数
        "vue",
      ],
      dts: "src/auto-import.d.ts", // 生成 `auto-import.d.ts` 全局声明
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      //ElementPlus按需加载
      resolvers: [ElementPlusResolver()],
      //需要按需加载的目录文件
      dirs: ["src/components"],
      extensions: ["vue"],
      // 生成 `components.d.ts` 全局声明
      dts: "src/components.d.ts",
    }),
  ],
});

像El-Message这样的是不能自动引入的使用的时候还是要导入，
import { ElMessage } from 'element-plus' ，而且样式会失效，在main.ts文件中加入以下代码，引入消息的样式文件（如果文件路径报错，在node_modules/element-plus目录下找找看）

import "element-plus/lib/theme-chalk/el-message.css";