插件的使用

axios 插件

依赖安装

cnpm i axios --save

全局引入axios（main.js文件）

// 全局引入axios
import axios from "axios"

Vue.prototype.axios = axios

使用

this.axios.get("/static/mock/index.json")

子组件引入axios

import axios from 'axios'
axios.defaults.baseURL = process.env.API_ROOT;

配置信息

API_ROOT: ' "http://14.23.85.253:8084/" '

Vue轮播图插件

安装(注意版本号)

npm install vue-awesome-swiper@2.6.7 --save

在main.js文件中注册及引入css

//插件注册
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)

原因

name: "swiper" //组件注册不能用关键词

better-scroll 插件

安装

npm install better-scroll --save

引入及使用

import BScroll from 'better-scroll'
mounted() {
  this.scroll = new BScroll(this.$refs.wrapper);
}

echarts水晶球插件

依赖安装

cnpm i echarts echarts-liquidfill --save

插件引入

import echarts from 'echarts';
import "echarts-liquidfill";

使用

let liquid = echarts.init(document.getElementById("liquid"));

fastclick 插件

用户点击屏幕大约延迟300毫秒后才会触发点击事件，这是为了检查用户是否在做双击

依赖安装

cnpm i fastclick --save

插件注册

import fastclick from "fastclick"
fastclick.attach(document.body)