npm yarn

第一个包、vuex-persistedstate

vuex里面的插件，用来持久化存储store里面的数据

1. 第一步安装

yarn add vuex-persistedstate@3.2.1 -S

2. 第二步导入使用

import Vue from 'vue'
import createPersistedState from 'vuex-persistedstate'
 //在vuex中有一个配置属性plugins,位vuex里面的插件使用
 plugins: [createPersistedState()]

第二个包、vue-quill-editor

vue里面的富文本编辑器

1. 第一步安装

npm install vue-quill-editor --save

2. 第二步导入使用

//全局注册组件
import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor)

3.使用

<quill-editor v-model="content"       
</quill-editor>

第三个包、vue@2swiper

vue@2swiper 轮播图插件

1. 第一步安装

npm i swiper@5 vue-awesome-swiper@3

2.在min.js导入使用

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
Vue.use(VueAwesomeSwiper)

3. 在模板中使用

//html
<swiper :options="swiperOptions">
      <swiper-slide>
        <img src="@/assets/images/html.png" alt="">
      </swiper-slide>
      <swiper-slide>
        <img src="@/assets/images/react.png" alt="">
      </swiper-slide>
      <swiper-slide>
        <img src="@/assets/images/vue.png" alt="">
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
 </swiper>

//js
 data() {
    return {
      swiperOptions: {
        pagination: {
          el: '.swiper-pagination'
        },
        autoplay: {
          delay: 2000,
          disableOnInteraction: false
        },
        loop: true
      }
    }
  },