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

注：本文適合入門小白食用，若有問題，勞煩各位大神指出