集成 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>
这种方式能有效避免样式污染,适合处理登录页等独立模块的样式需求。

