Vite创建Vue3工程并引入ElementPlus（图文详细）

Vite创建Vue3工程并引入ElementPlus（图文详细）

1 Vite创建Vue3工程

请确保本机已经正常安装了node18+以上版本，例如本项目使用18.19.0版本

安装多版本node请参考：使用NVM安装管理node版本

使用vite创建vue3工，参考vite官网：https://vitejs.cn/vite3-cn/guide/#scaffolding-your-first-vite-project

在需要创建VUE3项目工程的目录下使用cmd打开命令窗

输入vite创建vue工程命令，勾选vue和js

npm create vite@latest jialiangkj-pet-cms-vue3 --template vue

使用vscode打开创建的项目工程

进入package.json修改vue和vite相关版本号（此处是我常用的项目版本依赖，根据自己项目需要进行修改目前常用的vue3版本为3.2和3.4）
注意：vite3.2版本建议使用3.2.11

新建一个终端，安装相关依赖包

npm install安装依赖包

npm run dev启动运行项目

查看网页是否正常打开

2 ElementPlus引入

官网安装指南：https://element-plus.org/zh-CN/guide/installation.html

打开终端使用npm进行安装

npm install element-plus --save

1.完整引入

点击快速开始，复制示例代码进行引入

找到项目的main.js（TS下对应main.ts），添加代码进行引入挂载

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

2.按需导入（推荐）

查看官网按需导入的示例，在vite下进入按需导入，只有当使用对应组件时才进行自动导入

安装自动导入包

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

配置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://vite.dev/config/
export default defineConfig({
	plugins: [
		vue(),
		AutoImport({
			resolvers: [ElementPlusResolver()]
		}),
		Components({
			resolvers: [ElementPlusResolver()]
		})
	]
});

重写main.js文件

import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";

const app = createApp(App);

app.mount("#app");

3.ElementPlus测试

引入完毕后删除自带的HelloWorld示例组件引入完毕后删除自带的HelloWorld示例组件

删除App.vue多余的实例代码，删除后如下

打开ElementPlus官网，任意复制一段组件代码，例如按钮组件

复制按钮测试代码进入App.vue中进行测试

  <div class="mb-4">
    <el-button>Default</el-button>
    <el-button type="primary">Primary</el-button>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>
  </div>

npm run dev重新启动项目查看效果，此时ElementPlus已经正常引入