nuxt3引入element-plus的三种方法
方法 三种 引入 Plus Element nuxt3
2023-06-13 09:16:26 时间
1、全部引入
安装element-plus依赖
npm install element-plus --save
在nuxt3项目中plugins下新建一个element-plus.client.ts文件(注意:默认必须在 plugins
下新建配置文件,这是“约定”,详情见 官网)关于为什么要加 .client
感兴趣请看:《前端渲染CSR和SSR的结合使用分析》)
在element-plus.ts文件中输入
import ElementPlus from 'element-plus'
import { ID_INJECTION_KEY } from 'element-plus';
export default defineNuxtPlugin(nuxtApp => {
nuxtApp.vueApp.use(ElementPlus)
nuxtApp.vueApp.provide(ID_INJECTION_KEY, {
prefix: Math.floor(Math.random() * 10000),
current: 0,
})
})
然后在nuxt.config.ts文件中引入UI样式
export default defineNuxtConfig({
...
css: ['element-plus/dist/index.css'],
...
})
就可以在页面中引入element-plus组件了
2、按需引入
手动导入的话有两种方法:1、unplugin-vue-components 2、unplugin-element-plus
2.1、unplugin-vue-components
nuxt3目前不支持自动按需引入,需要在页面中import,不然报错
安装依赖
npm install element-plus --save
npm install unplugin-vue-components -D
在nuxt.config.ts文件中引入
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineNuxtConfig({
css: ['element-plus/dist/index.css'],
vite: {
plugins: [
Components({
dts: true,
resolvers: [ElementPlusResolver()]
})
],
}
})
在plugins下新建一个element-plus.ts文件(在SSR下elementui需要配置一个provide)
import { ID_INJECTION_KEY } from 'element-plus';
export default defineNuxtPlugin(nuxtApp => {
nuxtApp.vueApp.provide(ID_INJECTION_KEY, {
prefix: Math.floor(Math.random() * 10000),
current: 0,
})
})
在页面上引入使用
<script setup lang='ts'>
import {
ElButton
} from "element-plus";
</script>
<template>
<div>
<el-button>Default</el-button>
</div>
</template>
2.2、unplugin-element-plus
来自element-plus团队的示例:https://github.com/element-plus/element-plus-nuxt-starter
安装依赖
npm install element-plus --save
npm install unplugin-element-plus -D
在nuxt.config.ts文件中引入
import ElementPlus from 'unplugin-element-plus/vite'
export default defineNuxtConfig({
css: ['element-plus/dist/index.css'],
build: {
transpile: ['element-plus/es'],
},
vite: {
plugins: [
ElementPlus()
],
}
})
在plugins下新建一个element-plus.ts文件(在SSR下elementui需要配置一个provide)
import { ID_INJECTION_KEY } from 'element-plus';
export default defineNuxtPlugin(nuxtApp => {
nuxtApp.vueApp.provide(ID_INJECTION_KEY, {
prefix: Math.floor(Math.random() * 10000),
current: 0,
})
})
在页面上引入使用
<script setup lang='ts'>
import {
ElButton
} from "element-plus";
</script>
<template>
<div>
<el-button>Default</el-button>
</div>
</template>
相关文章
- n个进程访问一个临界资源,则设置的互斥信号量_多线程同步和互斥有几种实现方法
- MyEclipse6.5安装SVN插件的三种方法 .
- Kali Linux三种网络攻击方法总结(DDoS、CC和ARP欺骗)
- 集合【7】— 遍历ArrayList集合三种方法「建议收藏」
- 【说站】css设置行间距的三种方法
- 探索查看以太坊交易池的方法
- 图片木马制作的三种方法
- pjax加载多说的三种方法
- Oracle数据库分页的集中方法(三种方法)
- linux让程序开机自动运行最简单的方法
- Java Map.containsValue()方法:判断Map集合中是否包含指定的键值
- 深入探索Oracle统计数量的作用与实现方法(oracle统计数量)
- SQL Server中优化数据排序的方法(排序sqlserver)
- Linux安装教程:掌握正确的序列号码输入方法(linux安装号码)
- MySQL实现不分组计数的方法(mysql不分组计数)
- 表的方法Oracle中删除表的三种方法(oracle三种删除)
- SQLSERVER2008中三种分页方法与比较
- java中关于Map的三种遍历方法详解
- php读取文件内容的三种可行方法示例介绍
- php图片缩放实现方法
- node.js中的fs.unlink方法使用说明