--public time : 2018-08-09<四>--

1、基本开发流程

cnpm i -g vue vue-cli  #先安装最基本的vue 和 vue-cli
#vue init webpack app-name #实例化一个vue项目
vue init nuxt-community/starter-template app-name #实例化一个nuxt项目

cd app-name
cnpm i  
cnpm run dev 
#构建时有提示，最后通过下面的url访问：
http://localhost:3000

如下图所示：

nuxt启动页面.png

2、使用element-ui、font-awesome

a、首先安装依赖

cnpm i element-ui font-awesome

b、在文件中使用（见图）

<el-button type="danger">危险按钮</el-button>
<i class="fa fa-thumbs-up" style="color:blue;display:block;"></i>

vue文件使用element-ui和font-awesome.png

c、plugins里面引用插件，在nuxt.conf.js里面配置

具体的配置.png

3、效果图

效果图

4、最后给一下我的package.json文件

image.png

补充

plugins/elementUI.js里面可以直接把css引入，那么nuxt.config.js里面就不用再引入css了，而且推荐这样引入!

// plugins/elementUI.js
import Vue from 'vue'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(Element)