vue常用插件

展示本地markdown文件

安装插件

npm install vue-markdown-loader  -D
npm install vue-loader  -D
npm install vue-template-compiler  -D
npm install github-markdown-css  -D
npm install highlight.js  -D

vue.config.js中配置webpack

module.exports = {
  chainWebpack: config => {
    config.module.rule('md')
      .test(/\.md/)
      .use('vue-loader')
      .loader('vue-loader')
      .end()
      .use('vue-markdown-loader')
      .loader('vue-markdown-loader/lib/markdown-compiler')
      .options({
        raw: true
      })
  }
}

引入样式文件

// markdown样式
import 'github-markdown-css'
// 代码高亮
import 'highlight.js/styles/github.css'

在vue组件中使用

将md文件作为组件导入，注意：class的值必须包含 markdown-body ，否则样式无法生效！

<template>
  <demo-md class="markdown-body"></demo-md>
</template>

<script>
// 导入md文件 ，并注册为组件 
import DemoMd from './demo.md';
export default {
  components: {
    DemoMd
  }
}
</script>

展示获取数据的markdown

安装插件

npm install github-markdown-css  -D
npm install highlight.js  -D
npm install marked 

引入,使用

// markdown样式
import 'github-markdown-css'
// 代码高亮
import 'highlight.js/styles/github.css'
import {marked} from 'marked'; // marked 方法会将数据替换带有标签的内容然后直接用v-html渲染就好了
// 有了标签但是还是需要加class类名 markdown-body 让页面数据100% 还原

轻量级markdown 的插件 vue-quill-editor

安装

npm i  vue-quill-editor -D

// 引入 富文本插件
import VueQuillEditor from "vue-quill-editor";
//导入vue-quill-editor的样式
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
//全局注册富文本组件
Vue.use(VueQuillEditor);

使用

    <!-- 富文本编辑器组件  ql-editor class类名 -->
    <quill-editor v-model="markdown"></quill-editor>

一边输入一边展示的markdown插件

地址
http://ckang1229.gitee.io/vue-markdown-editor/zh/#%E8%BD%BB%E9%87%8F%E7%89%88%E7%BC%96%E8%BE%91%E5%99%A8

进度条插件

npm i NProgress
//导入进度条插件
import NProgress from "nprogress";
//导入进度条样式
import "nprogress/nprogress.css";
NProgress.start(); //开启
NProgress.done();  // 关闭

js-cookie

js-cookie 用来操作cookie

npm install js-cookie // 下载
import jsCookie from 'js-cookie; 
jsCookie.set('name','key',{expires:'有效期',path:'那个路径课件',domain:'那个域名可见',secure:'是否支持https默认不支持布尔值'})
jsCookie.get('name')
jsCookie.remove('name',{path:'如果设置path了,删除的时候也要指定'})
var cookies = jsCookie.noConflict() // noConflict定义新名词保留cookie
cookies.set('name', 'value')
// withConverter 返回一个新的cookie
var cookies2 = jsCookies.withConverter({
  read: function (value, name) { // 读cookie触发
    return cookies2.converter.read(value, name)
  },
  write: function (value, name) { // 写cookoe触发
    return value.toUpperCase()
  }
})

vue-lazyload

图片懒加载
https://www.npmjs.com/package/vue-lazyload

npm install vue-lazyload --save

qrcode

npm install --save qrcode
import qrcode from 'qrcode'; 
qrcode.toDataURL() 方法转化为二维码

js-md5

加密

npm install js-md5

导出 execl表格

import Vue from "vue";
import JsonExcel from "vue-json-excel";
Vue.component("downloadExcel", JsonExcel);

 <download-excel :data="json_data" :fields="json_fields" title="用户统计列表" name="用户.xls" type="xls">导出Excel</download-excel>

/*
name=“用户统计列表” --------------导出Excel文件的文件名
title=‘文件标题’
:fields = “json_fields” ----------------Excel中表头的名称
:data = “json_data” -------------------导出的数据
*/
// 表头标题
json_fields: {
        序号: "type",
        姓名: "userName",
        年龄: "age",
        手机号: "phone",
        注册时间: "createTime",
      },	
 // 表格数据，要与上方保持对象
json_data: [
        {
          type:0,
          userName: "张三",
          age: 18,
          phone: 15612345612,
          createTime: "2019-10-22",
        },]