Nuxt 框架集成 Element UI 及 CSS 引入方案

集成 Element UI

安装依赖

首先在项目根目录下执行安装命令：

npm i element-ui 

编写插件文件

为了保持配置整洁，建议在 plugins 目录下新建一个 JS 文件（例如 element-ui.js）。在该文件中引入 Vue 和 Element UI，并注册全局使用：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

注意：这里同时引入了样式文件，确保组件默认样式生效。

配置 Nuxt

修改项目根目录下的 nuxt.config.js 文件，将刚才创建的插件加入 plugins 数组中：

export default {
  plugins: [
    "~/plugins/element-ui.js"
  ]
}

---

CSS 引入策略

全局样式

如果需要重置或定义全局变量，可以在 nuxt.config.js 的 css 字段中添加：

css: [
  '~/assets/css/reset.css'
]

组件局部样式

对于特定页面或组件的样式，直接在 <style> 标签中使用 scoped 属性引入本地 CSS 文件即可：

<style scoped>
@import "~/assets/css/login.css";
</style>

这种方式能有效避免样式污染，适合处理登录页等独立模块的样式需求。