vite + vue3创建项目并按需引入element plus

第一步 创建vue3项目

• 首先你已经安装好了node.js，这些就不用多说了
• 如果你没有更换过镜像源，先来更换镜像源

npm config set registry=https://registry.npmmirror.com

• 然后来创建vite + vue3项目

# 这个命令 只能选择 框架 和 语言，其他模块需要手动安装和并配置
npm create vite@latest

这个指令是可以选择安装 router (路由) pinia (状态管理)等工具依赖
npm init vue@latest

# 这个命令，可以选择很多模块，例如router 和 pinia(推荐)
npm create vue@latest

第二步 下载element 组件

创建好的新项目，可以先把没用的文件删一删
使用以下指令 引入element plus

npm install element-plus --save

第三步 引入自动引入element 的插件

这两插件的作用就是在你使用 element的某个组件的时候，不需要手动引入了，自动帮你引，很方便

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

第四步 配置vite.config.ts 文件

找准地方，用 ----起点-----终点 包住的，是需要复制粘贴的

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
// ------------ 起点
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// ------------ 终点
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // --------- 起点
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
    // ----------- 终点
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

第五步 到这里基本组件都可以使用了

但是会有一些复杂组件引入后没有css样式只有功能
有两种解决办法

• 第一个很简单：
  有一些组件他在最上面引入了一些像这样的 代码

import { ElTable } from 'element-plus'

直接删掉或者注释掉就可以了，因为之前下载主动引入的组件了，这里在引入就冲突了

• 第二种复杂化的
  需要给main.js里面添加一行代码，引入element 的样式

import 'element-plus/theme-chalk/src/index.scss'

如果项目中没有scss的话可能会报错
npm 在安装一下scss就可以了 下面指令直接复制

npm install sass sass-resources-loader sass-resources-loader --save-dev