Vue SSR 项目 Nuxt.js 框架之《如何引入第三方UI

# 前言

在项目开发中引入第三方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']
    }
}

项目重启后就可以了，欢迎留言评论