使用nuxt开发博客后台管理系统（一）element ui的使用

注：文章中的nuxt为2.0.0版本

众所周知vue单页面应用的seo很不友好，每次打开页面先获取的节点也就是一个<div class="app"></div>,而这对想用vue做spa又想拥有友好搜索引擎seo优化的人来说就好比鸡肋。好在vue的官方出了nuxt，既能让我们使用spa又能拥有良好的搜索引擎优化；
nuxt介绍->https://zh.nuxtjs.org/guide

关于nuxt的安装请查看官网

安装过程我就不详细说了，具体参照官网。
这里说一下，这个项目使用的后台框架是koa，用的是element ui组件库。

进入主题：

使用element ui

我们在创建项目时已经选择安装了element ui，安装完就能使用了。

没有安装的命令行跑一下命令： npm install element-ui --save
然后在plugins文件夹下面，创建ElementUI.js文件
写入内容：

import Vue from 'vue'
import Element from 'element-ui'
import locale from 'element-ui/lib/locale/lang/zh-CN'

Vue.use(Element, { locale })

在nuxt.config.js中添加配置

css: [
  'element-ui/lib/theme-chalk/index.css'
],
plugins: [
  {src: '~/plugins/ElementUI', ssr: true }
],
build: {
  transpile: [/^element-ui/],
}

注： build的vendor在nuxt2.0+版本中将废弃，只保留做低版本兼容，所以我们这里使用transpile

然后就可以使用element ui了。

按需引入element ui组件

element ui可以使用了，但是我们引入的是所有的element ui组件，但是element ui中有些组件是我们项目不会或可能用不到的，这就导致了我们在项目完成准备部署上线时文件的过大导致加载速度的不够友好。我们可以先用webpack-bundle-analyzer来查看打包的代码大小，从而去优化文件大小；
安装webpack-bundle-analyzer： npm install webpack-bundle-analyzer --save-dev
nuxt.config.js文件build配置中添加配置：

build: {
    analyze: true,
    transpile: [/^element-ui/],
    /*
    ** You can extend webpack config here
    */
    extend (config, ctx) {
    }
  }

然后我们使用打包命令： npm run build --analyze
打包结束后浏览器会弹出树形图页面

我们发现vendors.app.js文件大小1.8m而element-ui大小1.69m，占据了接近94%的大小，so... 我们需要按需引入element ui。

第一步：安装 babel-plugin-component：

npm install babel-plugin-component -D

第二步：在nuxt.config.js文件中添加配置

在build选项添加babel配置使用我们刚刚安装的component插件

build: {
analyze: true,
transpile: [/^element-ui/],
babel: {
  'plugins': [
    [
      'component',
      {
        'libraryName': 'element-ui',
        'styleLibraryName': 'theme-chalk'
      }
    ]
  ],
  'comments': true
},

第三步：~/plugins/element-ui.js文件中配置你想引入的组件

import Vue from 'vue'
import { Pagination} from 'element-ui'
import locale from 'element-ui/lib/locale/lang/zh-CN'

Vue.use(Pagination, { locale })

这里我们引入了分页组件；ok了，现在我们开启服务 npm run dev
进入到页面中，你会发现除了分页组件外其他的组件都不能用了（这里我就不截图了，你们可以自己尝试），你也可以添加多几个想要用的组件，只要在~/plugins/element-ui.js文件中引入即可，用法：

import Vue from 'vue'
import { Pagination,Tag} from 'element-ui'
import locale from 'element-ui/lib/locale/lang/zh-CN'

Vue.use(Pagination, { locale })
Vue.use(Tag, { locale })

第四步：检查我们打包后的文件大小有没有改变
跑一下命令： npm run build --analyze
在弹出的树形图页面中我们看到：

这时候打包过后的vendors.app.js文件已经小了1m左右大小，而element-ui也只有差不多500k的大小，现在我们的element-ui按需引入就已经完成了。

这里有个问题需要注意一下，我们使用按需引入时，如果你使用了服务端渲染则nuxt.config.js文件中当plugins项的ssr需要设置为true

注：本文适合入门小白食用，如有问题，劳烦各位大神指出