nuxt3导入element-plus组件库和图标使用

最新推荐文章于 2024-05-28 20:05:55 发布

.-W-

最新推荐文章于 2024-05-28 20:05:55 发布

阅读量344

点赞数 2

文章标签： elementui 前端框架前端

本文链接：https://blog.csdn.net/qq_46222131/article/details/138751451

版权

第一步安装

npm i element-plus @element-plus/nuxt

第二部配置文件

nuxt.config.ts


export default defineNuxtConfig({

  //模块导入
  modules: [
    '@nuxtjs/style-resources',
    '@element-plus/nuxt',
    
  ],
  css:[
    'element-plus/dist/index.css',
    'element-plus/theme-chalk/display.css',
  ],

})

使用

vue文件中使用

图标使用

注意需要在Home 前面加上ElIcon

<el-icon><ElIconHouse /></el-icon>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

.-W-

关注关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
nuxt3导入element-plus组件库和图标使用

需要在Home 前面加上ElIcon。
复制链接

扫一扫

element plus全局导入图标和全局配置

温情

04-15

1799

1. 图标安装 npm install @element-plus/icons-vue 2. 全局导入 // main.ts import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' import zhCn from 'element-plus/es/locale/lang/zh-cn' import * as ELIcons from '@element-plus/icons-vue' const app =

Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)

01-18

Nuxt嵌套路由官网上的API详解：点击链接 ... 父组件的页面的内容  <li><nuxt to='/parent/child'>child</nuxt> <li><nuxt to='/parent/child2'>child2</nux

参与评论您还未登录，请先登录后发表或查看评论

Nuxt配置Element-UI按需引入的操作方法

10-15

主要介绍了Nuxt配置Element-UI按需引入方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

Nuxt3引入Element-plus和sass

键指江湖的博客

07-08

1097

或者命令行cd到项目文件运行npm install @element-plus/nuxt。或者命令行cd到项目文件运行npm install sass --save-dev。打开编辑器终端运行npm install @element-plus/nuxt。打开编辑器终端运行npm install sass --save-dev。在nuxt.config.ts文件添加代码。package.json文件会出现。package.json文件会出现。

【Nuxt】在 Nuxt3 中使用 Element Plus

日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈

11-06

1970

类似写 vue3 项目，可以导入组件，也可以直接使用组件。

nuxt3+Element Plus项目搭建过程记录

热门推荐

逆境清醒的博客

03-23

2万+

Element Plus是基于Vue 3，面向设计师和开发者的组件库。一、前言。二、安装方法。三、Element Plus用法。四、Element Plus 安装使用小实例

Nuxt3项目中集成element-plus UI库

CXW1014的专栏

02-06

1192

产生这个问题的原因可能是在flex布局中子元素el-menu的宽度在没指定的时候，默认是最小的，在最小的情况下el-menu-item不显示了，只显示内部自动添加的el-sub-menu。使用过程中碰到一个与这个库有关的问题,一直以为是这个库的问题，在github上查了好久也没有找到解决办法，后来发现原来是flex布局产生的问题。花不少时间在尝试了网上文章中说的方式，都会出现各种编译时和运行时的问题,花了不少时间掉了不少头发，正在毫无头绪时，在官网无意间找到集成的方式。, 就可以在浏览器上看到效果了。

详解Nuxt.js中使用Element-UI填坑

10-16

主要介绍了详解Nuxt.js中使用Element-UI填坑，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

nuxt-svg-loader:SVG作为组件，也在服务器端！

05-13

设置使用yarn或npm将nuxt-svg-loader添加为依赖项到您的项目添加nuxt-svg-loader到modules的部分nuxt.config.js{ modules : [ 'nuxt-svg-loader' , ]} 现在，您可以像常规Vue组件一样使用svg文件您还可以通过在文件...

nuxt-storybook-element-boilerplate：Nuxt，Storybook，ElementUI，Boilerplate

02-04

nuxt-storybook-element-ui 我豪华的Nuxt.js项目构建设置# install dependencies$ yarn install# serve with hot reload at localhost:3000$ yarn run dev# build for production and launch server$ yarn run build...

element-plus踩坑之使用＜el-icon＞＜Menu /＞＜/el-icon＞加载不出且内存一直持续飙升

技术爬坡记录

06-26

2035

解决方法之在Vue中使用element-plus且全局注册了icon，使用其他图标正常，使用Menu图标后加载不出页面且内存一直持续飙升！

Nuxt3项目集成Element Plus

lxRime的博客

05-31

557

element-plus/nuxt 是官网的解决方案，具体可查。

Nuxt3中引入ElementUI-Plus

04-05

559

nuxt.config.ts文件中引入模块。

Nuxt+vue3+Element-plus+TypeScript

weixin_44208404的博客

08-08

1132

进公司实习一段时间了，想用学到的东西进行独立开发，踩坑不少，做个总结。

Nuxt3 项目怎么下载element-plus

06-10

要在 Nuxt3 项目中使用 Element Plus，需要先安装 Element Plus 和 Vue 3： ``` npm install element-plus vue@next --save ``` 然后在你的 Nuxt3 项目中，在 `nuxt.config.js` 文件中添加以下内容： ```js export default { // ... head: { // ... script: [ { src: 'https://unpkg.com/vue@next', type: 'text/javascript', body: true, }, ], }, css: [ 'element-plus/theme-chalk/el-icon.css', 'element-plus/theme-chalk/index.css', ], plugins: [{ src: '~/plugins/element-plus.js', ssr: false }], }; ``` 在 `plugins` 目录下创建一个新的文件 `element-plus.js`，并添加以下内容： ```js import { createApp } from 'vue'; import ElementPlus from 'element-plus'; import 'element-plus/theme-chalk/index.css'; export default function (context, inject) { const app = createApp(context.app); app.use(ElementPlus); context.app = app; inject('message', ElementPlus.ElMessage); } ``` 现在你可以在项目中使用 Element Plus 了，例如： ```vue <template> <el-button @click="showMessage">显示消息</el-button> </template> <script> export default { methods: { showMessage() { this.$message({ message: '这是一条消息', type: 'success', }); }, }, }; </script> ```

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交