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

Freeman 发布于2019-08-26 10:49 / 1817人阅读

摘要：进入主题使用我们在创建项目时已经选择安装了，安装完就能使用了。

注：文章中的nuxt为2.0.0版本

众所周知vue单页面应用的seo很不友好，每次打开页面先获取的节点也就是一个

,而这对想用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

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106817.html

服务端预渲染之Nuxt（介绍篇）

摘要：为了解决问题，推出了服务端预渲染，以便提高对优化。应用，到了，单页面应用优秀的用户体验，逐渐成为了主流，页面整体式渲染出来的，称之为客户端渲染。客户端接收数据，然后完成最终渲染。通过对客户端服务端基础框架的抽象组织，主要关注的是应用的渲染。现在前端开发一般都是前后端分离，mvvm和mvc的开发框架，如Angular、React和Vue等，虽然写框架能够使我们快速的完成开发，但是由于前...

Shonim 2019-08-23 16:46 评论0 收藏0
vue 前端项目技术选型、开发工具、周边生态

摘要：有目录结构书写方式组件集成项目构建等的约束，整个应用中是没有文件的，所有的响应都是动态渲染的，包括里面的元信息路径等。更多参考细说后端模板渲染客户端渲染中间层服务器端渲染开发工具开发时主要会用到的工具。 vue 前端项目技术选型、开发工具、周边生态声明：这不是一篇介绍 Vue 基础知识的文章，需要熟悉 Vue 相关知识主架构：vue, vue-router, vuex UI 框...

Awbeci 2019-08-30 15:54 评论0 收藏0
vue 前端项目技术选型、开发工具、周边生态

摘要：有目录结构书写方式组件集成项目构建等的约束，整个应用中是没有文件的，所有的响应都是动态渲染的，包括里面的元信息路径等。更多参考细说后端模板渲染客户端渲染中间层服务器端渲染开发工具开发时主要会用到的工具。 vue 前端项目技术选型、开发工具、周边生态声明：这不是一篇介绍 Vue 基础知识的文章，需要熟悉 Vue 相关知识主架构：vue, vue-router, vuex UI 框...

enali 2019-08-23 14:14 评论0 收藏0
使用 Nuxt.js 快速搭建服务端渲染(SSR) 应用

摘要：安装官方提功了两种方法来进行项目的初始化，一种是使用团队的脚手架工具，一种是根据自己的需求自由配置使用脚手架适合新手，对后台框架有所了解按照自己需求自由配置，需要对如何配置以及后台框架有所了解。两种方式比较下就是原生和插件的区别。安装 nuxt.js Nuxt.js 官方提功了两种方法来进行项目的初始化，一种是使用Nuxt.js团队的脚手架工具 create-nuxt-app ，一种...

luodongseu 2019-08-26 13:37 评论0 收藏0
使用 Nuxt.js 快速搭建服务端渲染(SSR) 应用

摘要：安装官方提功了两种方法来进行项目的初始化，一种是使用团队的脚手架工具，一种是根据自己的需求自由配置使用脚手架适合新手，对后台框架有所了解按照自己需求自由配置，需要对如何配置以及后台框架有所了解。两种方式比较下就是原生和插件的区别。安装 nuxt.js Nuxt.js 官方提功了两种方法来进行项目的初始化，一种是使用Nuxt.js团队的脚手架工具 create-nuxt-app ，一种...

leanote 2019-06-26 17:59 评论0 收藏0