使用nuxt開發(fā)博客后臺管理系統(tǒng)（一）element ui的使用

Freeman 發(fā)布于2019-08-26 10:49 / 1855人閱讀

摘要：進入主題使用我們在創(chuàng)建項目時已經(jīng)選擇安裝了，安裝完就能使用了。

注：文章中的nuxt為2.0.0版本

眾所周知vue單頁面應用的seo很不友好，每次打開頁面先獲取的節(jié)點也就是一個

,而這對想用vue做spa又想擁有友好搜索引擎seo優(yōu)化的人來說就好比雞肋。好在vue的官方出了nuxt，既能讓我們使用spa又能擁有良好的搜索引擎優(yōu)化；
nuxt介紹->https://zh.nuxtjs.org/guide

關于nuxt的安裝請查看官網(wǎng)

安裝過程我就不詳細說了，具體參照官網(wǎng)。
這里說一下，這個項目使用的后臺框架是koa，用的是element ui組件庫。

進入主題：

使用element ui

我們在創(chuàng)建項目時已經(jīng)選擇安裝了element ui，安裝完就能使用了。

沒有安裝的命令行跑一下命令： npm install element-ui --save
然后在plugins文件夾下面，創(chuàng)建ElementUI.js文件
寫入內(nèi)容：

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來查看打包的代碼大小，從而去優(yōu)化文件大小；
安裝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
打包結束后瀏覽器會彈出樹形圖頁面

我們發(fā)現(xiàn)vendors.app.js文件大小1.8m而element-ui大小1.69m，占據(jù)了接近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了，現(xiàn)在我們開啟服務 npm run dev
進入到頁面中，你會發(fā)現(xiàn)除了分頁組件外其他的組件都不能用了（這里我就不截圖了，你們可以自己嘗試），你也可以添加多幾個想要用的組件，只要在~/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文件已經(jīng)小了1m左右大小，而element-ui也只有差不多500k的大小，現(xiàn)在我們的element-ui按需引入就已經(jīng)完成了。

這里有個問題需要注意一下，我們使用按需引入時，如果你使用了服務端渲染則nuxt.config.js文件中當plugins項的ssr需要設置為true

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

GPU云服務器云服務器 element-ui 網(wǎng)站后臺的短信接口使用啥 element-ui dialog組件實驗一云服務器的基本使用

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/106817.html

服務端預渲染之Nuxt（介紹篇）

摘要：為了解決問題，推出了服務端預渲染，以便提高對優(yōu)化。應用，到了，單頁面應用優(yōu)秀的用戶體驗，逐漸成為了主流，頁面整體式渲染出來的，稱之為客戶端渲染。客戶端接收數(shù)據(jù)，然后完成最終渲染。通過對客戶端服務端基礎框架的抽象組織，主要關注的是應用的渲染。現(xiàn)在前端開發(fā)一般都是前后端分離，mvvm和mvc的開發(fā)框架，如Angular、React和Vue等，雖然寫框架能夠使我們快速的完成開發(fā)，但是由于前...

Shonim 2019-08-23 16:46 評論0 收藏0
vue 前端項目技術選型、開發(fā)工具、周邊生態(tài)

摘要：有目錄結構書寫方式組件集成項目構建等的約束，整個應用中是沒有文件的，所有的響應都是動態(tài)渲染的，包括里面的元信息路徑等。更多參考細說后端模板渲染客戶端渲染中間層服務器端渲染開發(fā)工具開發(fā)時主要會用到的工具。 vue 前端項目技術選型、開發(fā)工具、周邊生態(tài) 聲明：這不是一篇介紹 Vue 基礎知識的文章，需要熟悉 Vue 相關知識主架構：vue, vue-router, vuex UI 框...

Awbeci 2019-08-30 15:54 評論0 收藏0
vue 前端項目技術選型、開發(fā)工具、周邊生態(tài)

摘要：有目錄結構書寫方式組件集成項目構建等的約束，整個應用中是沒有文件的，所有的響應都是動態(tài)渲染的，包括里面的元信息路徑等。更多參考細說后端模板渲染客戶端渲染中間層服務器端渲染開發(fā)工具開發(fā)時主要會用到的工具。 vue 前端項目技術選型、開發(fā)工具、周邊生態(tài) 聲明：這不是一篇介紹 Vue 基礎知識的文章，需要熟悉 Vue 相關知識主架構：vue, vue-router, vuex UI 框...

enali 2019-08-23 14:14 評論0 收藏0
使用 Nuxt.js 快速搭建服務端渲染(SSR) 應用

摘要：安裝官方提功了兩種方法來進行項目的初始化，一種是使用團隊的腳手架工具，一種是根據(jù)自己的需求自由配置使用腳手架適合新手，對后臺框架有所了解按照自己需求自由配置，需要對如何配置以及后臺框架有所了解。兩種方式比較下就是原生和插件的區(qū)別。安裝 nuxt.js Nuxt.js 官方提功了兩種方法來進行項目的初始化，一種是使用Nuxt.js團隊的腳手架工具 create-nuxt-app ，一種...

luodongseu 2019-08-26 13:37 評論0 收藏0
使用 Nuxt.js 快速搭建服務端渲染(SSR) 應用

摘要：安裝官方提功了兩種方法來進行項目的初始化，一種是使用團隊的腳手架工具，一種是根據(jù)自己的需求自由配置使用腳手架適合新手，對后臺框架有所了解按照自己需求自由配置，需要對如何配置以及后臺框架有所了解。兩種方式比較下就是原生和插件的區(qū)別。安裝 nuxt.js Nuxt.js 官方提功了兩種方法來進行項目的初始化，一種是使用Nuxt.js團隊的腳手架工具 create-nuxt-app ，一種...

leanote 2019-06-26 17:59 評論0 收藏0