搭建 vue3+elementPlus 项目

导语： 这是一个流程，这个流程使用 vite 创建 vue3 项目，并且演示了 elementPlus 组件库的引入与配置

1、打开终端：桌面 -> shift+鼠标右键 -> 打开powershell窗口

2、安装最新版本的 Vite，并创建一个新的 Vite 项目

npm create vite@latest 

3、输入项目的名字

Project name: » vite-project

4、按上下选择框架，这就选vue，回车

Select a framework: » - Use arrow-keys. Return to submit.
    Vanilla
>   Vue
    React
    Preact
    Lit
    Svelte
    Others

5、按上下选择选择 JavaScript/TypeScript

Select a variant: » - Use arrow-keys. Return to submit.
>   TypeScript
    JavaScript
    Customize with create-vue ↗
    Nuxt ↗

6、控制台出现后面这三条命令。返回桌面把新建的项目拉入 vscode 编译器

Done. Now run:
  cd vite-project
  npm install
  npm run dev

7、vscode中 ctrl+~ 打开终端，npm i 安装基础包

npm i

8、安装 element-plus

npm install element-plus

9、elementPlus 组件库自动按需引入

9.1 需要先安装插件：

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

9.2 然后在 vite.config.js 里面配置：

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({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
});

// 使用 `unplugin-auto-import` 和 `unplugin-vue-components` 
// 会自动在编译过程中将我们在业务代码里面使用到的组件以按需引入的方式进行引入，
// 包括了组件代码和样式代码

10、在 src/App.vue 下使用 element-plus

<el-button type="success">Success</el-button>

11、运行项目，查看效果

npm run dev