博客迁移nuxt2（三）使用各类插件

简单介绍一下在nuxt中常用插件的用法：vue-awesome-swiper、element-ui、hightlightJs、wangEditor

nuxt中使用插件的方式

nuxt根目录下有一个plugins文件夹，这里就是平常存放插件的文件目录，然后通过在nuxt.config.js中plugins配置，就可以使用插件了

使用vue-awesome-swiper

vue-awesome-swiper官方文档：github.surmon.me/vue-awesome…

我这里使用的是swiper4，所以vue-awesome-swiper用的是3.1.3版本

plguin目录下建一个swiper.js文件

import Vue from 'vue'
// import 'swiper/dist/css/swiper.css'

if (process.browser) {// 在客户端才引入，可加可不加
  const VueAwesomeSwiper = require('vue-awesome-swiper/dist/ssr') //引入的是dist目录底下的ssr
  Vue.use(VueAwesomeSwiper)
}

然后在nuxt.config.js中引用，这里我就把本文相关的插件的配置一起放出来了

  css: ['element-ui/lib/theme-chalk/index.css', 'swiper/dist/css/swiper.css'],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
    '@/plugins/element-ui',
    { src: '@/plugins/swiper', ssr: false },
    { src: '@/plugins/wangEditor', ssr: false },
    { src: '@/plugins/highlight', ssr: false },
  ],

注意要把样式也做一个引入

然后要修改原来的swiper代码，把原来的swiper、swiper-slide标签改掉，改成v-swiper，然后在原来的<swiper>标签上加上class="swiper-wrap"，<swiper-slide>则加上class="swiper-slide"，其他不变即可

<swiper
    ref="mySwiper"
    :options="swiperOptions"
    class="swiper-wrap"
    v-if="swiperList.length > 1"
  >
    <swiper-slide class="swiper-item" v-for="item in swiperList" :key="item.id">
      <div class="swiper-contain">
        <img :src="item.posterUrl" alt="" class="swiper-img" />
        <div class="swiper-show">
          <div class="show-content">
            <div class="show-title">
              <span class="title-tag">{{ item.classify.classifyName }}</span>
              <span class="blog-title">{{ item.title }}</span>
            </div>
            <p class="blog-introduction">{{ item.introduction }}</p>
          </div>
        </div>
      </div>
    </swiper-slide>

<template>
  <div v-swiper:mySwiper="swiperOptions" class="swiper-wrap">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="item in swiperList" :key="item.id">
        <div class="swiper-contain">
          <img :src="item.posterUrl" alt="" class="swiper-img" />
          <div class="swiper-show">
            <div class="show-content">
              <div class="show-title">
                <span class="title-tag">{{ item.classify.classifyName }}</span>
                <span class="blog-title">{{ item.title }}</span>
              </div>
              <p class="blog-introduction">{{ item.introduction }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div slot="pagination" class="swiper-pagination"></div>
    <div slot="button-prev" class="swiper-button-prev"></div>
    <div slot="button-next" class="swiper-button-next"></div>
  </div>
</template>

element-ui

其实element很简单，甚至在创建nuxt项目时，还可以通过选择来让脚手架为你配置好

// 这个就是nuxt帮我生成的，在这里你也可以做按需引入
import Vue from 'vue'
import Element from 'element-ui'
import locale from 'element-ui/lib/locale/lang/en'

Vue.use(Element, { locale })

hightlightJs

既然是一个博客，就会有代码块和md格式，这里我用的是marked和highlighJs搭配，识别md格式并将代码显示高亮

marked更新好像有点快，我用的时候还是2.x的版本，现在已经是4.x了，然后4.x报错了，所以我用的还是2.x的版本，marked直接安装就行了，使用也很简单

import marked from 'marked'
marked(data.content) // md格式的字符串

highlighJs我使用的是vue-hljs

插件引入

import Vue from 'vue'
import vueHljs from 'vue-hljs'
import hljs from 'highlight.js'
import 'vue-hljs/dist/style.css'
//这里可以去换别的css，自带了各种的主题，引入对应的css文件就行了
// import "highlight.js/styles/a11y-dark.css";

Vue.use(vueHljs, { hljs })

使用

 <div v-highlight v-html="blogHtml"></div>

wangEditor

插件引入

import Vue from 'vue'
import Wangeditor from 'wangeditor'

Vue.prototype.$wangeditor = (content) => {
  return new Wangeditor(content)
}

vue中使用

 <div ref="editor" class="editor"></div>
 // js
 import Wangeditor from "wangeditor";

 methods: {
    createEditor() {
      const dom = this.$refs.editor;
      const editor = new Wangeditor(dom);
      editor.config.height = Number(this.height); //设置富文本编辑器高度
      editor.config.placeholder = this.placeholder; //设置富文本编辑器placeholder
      editor.config.menus = this.menus; //设置富文本编辑器菜单栏
      editor.config.showFullScreen = false; //禁用全屏功能
      editor.create(); //创建富文本编辑器
      this.editor = editor; //保存editor对象
    },
  },
  mounted() {
    this.createEditor();
  },

nuxt中使用

  <div id="editor" ref="editor"></div>
  // js 
  methods: {
    createEditor() {
      // const dom = this.$refs.wangeditor
      const editor = this.$wangeditor('#editor') //修改一下初始化的方式就行了

      editor.config.height = Number(this.height) // 设置富文本编辑器高度
      editor.config.placeholder = this.placeholder // 设置富文本编辑器placeholder
      editor.config.menus = this.menus // 设置富文本编辑器菜单栏
      editor.config.showFullScreen = false // 禁用全屏功能
      editor.create() // 创建富文本编辑器
      this.editor = editor // 保存editor对象
    },
  },
  mounted() {
    this.createEditor()
  },