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>