Nuxt.js是一個基於Vue.js的服務端渲染應用框架

Nuxt.js官方提供了一個模板，可以使用vue-cli直接安裝

$ vue init nuxt-community/starter-template <project-name>

但是前提是你已經安裝過vue-cli，如果沒有安裝，先安裝

$ npm install vue-cli -g

檢查一下是否安裝成功

$ vue -V

模板的目錄如下

允許命令安裝依賴

$ npm install

或

yarn

我個人用yarn，所以以下安裝依賴包我也使用yarn，請悉知

跑起專案

$ npm run dev
 

至此，nuxt.js + vue.js就整合完成了，那麼，如何使用element-ui呢。我在網上查的資料都是關於webpack模板的vue-cli中的element-ui的使用，所以這裡有坑，記錄一下。

首先，安裝element-ui和css-loader、style-loader

$ yarn add element-ui -D
$ yarn add css-loader style-loader -D

個人理解，在Nuxt模板下的vue-cli腳手架，是把element-ui視為外掛的

所以，我們需要在plugins資料夾中新建一個element-ui.js

// element-ui.js
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
 

接下來，到nuxt.config.js中註冊這個外掛，順便把loader也引用

// nuxt.config.js
module.exports = {
  // ... 
  build: {
    // ...
    loaders: [
    // 設定loader
      {
        test: /\.(css)$/,
        loader: 'style-loader!css-loader'
      }
    ]
    //...
  },
  // ...
  // 指向外掛
  plugins: ['./plugins/element-ui.js']
  // ...
}

最後，就可以在頁面中直接使用element-ui的元件啦

<!-- 一個.vue檔案 -->
<template>
  <section class="container">
    <el-button-group>
      <el-button type='primary' icon='arrow-left'>上一頁</el-button>
      <el-button type='primary' icon='arrow-right'>下一頁</el-button>
    </el-button-group>
  </section>
</template>