# 前言
在项目开发中引入第三方UI框架再平常不过，那nuxt该如何引入呢？我们以Elemeng-ui为例，具体看下在nuxt中配置与使用的步骤是怎样的。
# 第一步：安装
npm i element-ui --save
# 第二步：引入
需在plugins文件夹里创建一个element-ui.js文件，内容如下：
import Vue from 'vue'
// 全局引入
import Element from 'element-ui'
import locale from 'element-ui/lib/locale/lang/zh-CN'
Vue.use(Element, { locale })
// 按需引入
import {Button, Table} from 'element-ui'
Vue.use(Button)
Vue.use(Table)
# 第三步：配置 nuxt.config.js 文件
export default{
css: ['element-ui/theme-chalk/index.css'],
plugins: [{
src: '@/plugins/element-ui',
ssr: true, // 不支持 ssr 渲染的只会在客户端运行，不用给 true
// mode: 'server' // client v2.4+ 版本 用 mode: 'server' 代替了 ssr
}],
build:{
transpile: [/^element-ui/] // 打包时不包含element-ui
}
}
现在已经完成了安装、引入和配置，重启之后就可以使用
element-ui的组件了
# 如何使用 scss
在nuxt项目中如何使用scss？与Vue中使用的有和不同？也简单，只是配置上略有不同，使用上没有不同。先安装node-sass sass-loader，如下：
npm i node-sass sass-loader --save
安装成功后，就可以在页面里使用scss了，无需任何配置，如下：
<template>
<div>
<p> 内容 </p>
</div>
</template>
<style lang='scss' scoped>
$bg: #399;
$ht: 200px;
div{
padding: 20px;
background: $bg;
p{
height: $ht;
margin: 30px 50px;
}
}
</style>
如果是全局的
·scss文件，又该如何引入和使用呢？这时就需借助另一个模块了
第一步：安装 @nuxtjs/style-resources
npm i @nuxtjs/style-resources --save
第二步：配置 nuxt.config.js
export default{
modules: ['@nuxtjs/style-resources'],
styleResources: {
scss: ['./assets/scss/global.scss']
}
}
项目重启后就可以了，欢迎留言评论
