nuxt.js框架引用element-ui

最新推荐文章于 2025-06-08 09:18:51 发布

转载最新推荐文章于 2025-06-08 09:18:51 发布 · 1.5k 阅读

文章标签：

#nuxt.js #element-ui

vue 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了如何在Nuxt框架中引入并配置Element-UI组件库，通过添加插件和调整配置文件，实现前后端分离项目中的快速UI开发。

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

Vue.js的nuxt框架引用element-ui

前言

其实就是为nuxt添加一个插件，使用其他vue插件也是一样的用法

安装

npm install element-ui --save

调用element-ui

首先在nuxt项目下的plugins文件夹下新建一个element-ui.js文件，里面写：

import Vue from 'vue'

import Element from 'element-ui'

Vue.use(Element);

然后在nuxt根目录下找到nuxt.config.js文件，里面加上这些代码：

/*调用element-ui自带的css样式*/
css:[
    {src:'element-ui/lib/theme-chalk/index.css'}
  ],

/*调用element-ui插件，ssr是服务器渲染*/
  plugins: [
    {
      src:'~plugins/element-ui',
      ssr: false}
    ],

  /*
  ** Build configuration
  */
  build: {
    /*此处要加vendor*/
    vendor: ['element-ui'],
    /*
    ** Run ESLint on save
    */
    extend (config, { isDev, isClient }) {
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    },

  },

至此，我们就可以偷懒愉快地使用element-ui了