Nuxt.js是Vue進行SSR的一個優選開源專案，可免去繁瑣的Webpack、nodejs後臺服務配置等操作，方便的搭建一個支援SSR的VUE專案。Element-UI則是一個機遇Vue2.0+開發的一套UI框架，實現了常用的元件，可幫助開發者快速搭建一個如CMS系統、後臺管理系統等基於Vue的系統。

由於Element-UI目前在SSR支援方面還是不夠完善，且Nuxt.js在文件方面也有欠缺，所以在Nuxt.js中使用Element-UI也是一段坑路，需要去將檢視Nuxt原始碼與Element-UI文件相結合才可以填完坑。

1、建立Nuxt.js的專案

Nuxt.js提供了一個vue-cli的模板，可以快速的開始coding的工作。

vue init nuxt/starter \

2、新增Element-UI

與其他元件一樣，直接通過npm或者yarn即可新增。

yarn add element-ui

在Nuxt.js中使用Element-UI需要通過plugins的方式引入，所以我們需要配置nuxt.config.js檔案。

css: [
    '~assets/css/main.css',
    'element-ui/lib/theme-default/index.css'
  ],
 build: {
    vendor: [
      'axios',
      'element-ui'
 

    ],
    babel: {
      plugins: [['component', [{
        libraryName: 'element-ui',
        styleLibraryName: 'theme-default'
      }]]]
    },
    loaders:[
      {
        test: /\.css$/,
        loader: 'vue-style-loader!css-loader'
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        loader: 'url-loader'
 
,
        query: {
          limit: 1000, // 1KO
          name: 'img/[name].[hash:7].[ext]'
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        query: {
          limit: 1000, // 1 KO
          name: 'fonts/[name].[hash:7].[ext]'
        }
      }
    ],
    postcss: [
      require('autoprefixer')({
        browsers: ['last 3 versions']
      })
    ]
  },
 plugins: ['~plugins/element-ui'],

同時，我們需要在根目錄下新建一個plugins的目錄，新增一個element-ui.js的檔案，檔案內容如下：

import Vue from 'vue'

if (process.BROWSER_BUILD) {
  Vue.use(require('element-ui'))
}

通過此種方式即可實現在Nuxt.js中使用Element-UI。