Nuxt整合 Element-ui（超详细教学，看一遍你就会）

小周报看

已于 2023-02-07 18:39:57 修改

阅读量1.2k

点赞数 2

CC 4.0 BY-SA版权

文章标签： ui vue.js javascript

于 2022-12-23 11:41:41 首次发布

本文链接：https://blog.csdn.net/weixin_65822861/article/details/128415956

本文详细介绍了如何在Nuxt.js项目中安装和配置Element-UI，包括通过npm安装、创建element-ui.js插件文件、在nuxt.config.js中添加配置，并最终重新运行项目实现组件库的集成。

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

1.下载安装element-ui

在指定项目的控制台上输入npm i element-ui -S开始下载安装

在package.json中出现以下图片中的信息即为安装成功

2.在plugins问价夹中创建element-ui.js文件

3.在nuxt.config.js中添加配置信息

4.重新运行项目 npm run dev

1.下载安装element-ui

在指定项目的控制台上输入npm i element-ui -S开始下载安装

npm i element-ui -S

在package.json中出现以下图片中的信息即为安装成功

2.在plugins文件夹中创建element-ui.js文件

添加以下信息

import Vue from 'vue'
import Element from 'element-ui'
// import locale from 'element-ui/lib/locale/lang/en'
import locale from 'element-ui/lib/locale/lang/zh-CN'

// Vue.use(Element, { locale })
Vue.use(Element)

3.在nuxt.config.js中添加配置信息

css: [
    'element-ui/lib/theme-chalk/index.css'    // 引入全局样式
  ],
plugins: [
    '@/plugins/element-ui',  // ssr:true代表在服务端渲染,客户端不渲染
  ],
build: {
    transpile: [/^element-ui/], // 防止重复重复打包
  }