uni-app下安装Element Plus

在uniapp上安装Element Plus步骤：

一、uni-app创建项目

二、安装Element Plus
npm install element-plus --save

三、安装图标icon
npm install @element-plus/icons-vue

四、安装TypeScript
npm install typescript --save-dev

五、安装自动导入插件
npm install -D unplugin-vue-components unplugin-auto-import

以下为配置：

全局配置，完整代码如下：

打开main.js文件，修改代码如下：

import App from './App'

// #ifndef VUE3
import Vue from 'vue'
import './uni.promisify.adaptor'

Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
	...App
})
app.$mount()
// #endif

// #ifdef VUE3
import {
	createSSRApp
} from 'vue'
//引入ElementPlus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
export function createApp() {
	const app = createSSRApp(App)
//默认中文语言包
	app.use(ElementPlus, {
		locale: zhCn
	})
	return {
		app
	}
}
// #endif

按需导入配置

按需导入ElementPlus配置，在项目根目录下新建vite.config.js文件，内容如下：

// 导入 Vite 的配置函数
import {
	defineConfig
} from 'vite';
// 导入 UniApp 的 Vite 插件
import uni from '@dcloudio/vite-plugin-uni';
// 导入自动导入插件
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite'
//导入ElementPlus
import {
	ElementPlusResolver
} from 'unplugin-vue-components/resolvers'

// 定义 Vite 配置
export default defineConfig({
	plugins: [
		// 使用 UniApp 插件
		uni(),

		// 自动导入配置
		AutoImport({
			imports: [
				// 预设导入库
				'vue', // 自动导入 Vue 相关函数
				'uni-app' // 自动导入 UniApp 相关函数
			],
			resolvers: [ElementPlusResolver()],
		}),
		Components({
			resolvers: [ElementPlusResolver()],
		}),
	]
});