nuxt按需引入 element-UI

最新推荐文章于 2025-07-03 09:22:05 发布

青云码上

最新推荐文章于 2025-07-03 09:22:05 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_21363577/article/details/92839486

博客介绍了Nuxt.js引入第三方插件的方法。首先要安装babel-plugin-component，接着修改plugins/element.js文件，按格式引入所需组件，最后添加nuxt.config.js中的build配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先你要知道 nuxt.js怎么引入第三方插件；

不多BB。

第一步：安装 babel-plugin-component：

npm install babel-plugin-component -D

第二步：修改plugins/element.js文件（plugins/element.js不知道怎么来的？出门左拐不送 nuxt.js怎么引入第三方插件）：

import Vue from 'vue'

import { Button, Input } from 'element-ui'

Vue.use(Button)
Vue.use(Input)

按照这个格式引入自己需要的组件就是了。

第三步：添加nuxt.config.js中的build配置：

export default {
  build: {
　　// 按需引入element-ui
    babel: {
      plugins: [
        [ "component", {"libraryName": "element-ui",  "styleLibraryName": "theme-chalk"}] 
      ] 
    },
/*
    ** You can extend webpack config here
    */
    extend(config, ctx) {
    }
  }  
}

没了，就这样。