使用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

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