Vue项目中常用插件库安装

常用插件安装

1、echart

npm install echarts --save
import echarts from 'echarts'

2、vue-resource（官方提供的vue 的一个插件）

安装

	npm install vue-resource --save

在main.js中注册该模块

    import VueResource from 'vue-resource'
    Vue.use(VueResource);

在组件中直接使用

    this.$http.get(地址).then（function(success_response){},finction(err_response){})

3、axios

文档地址：http://www.axios-js.com/

npm install axios --save

哪里使用就哪里引用，或者在main.js中注册后使用

import axios from 'axios';
axios.get('/user?ID=12345')
   .then(function (response) {
      console.log(response);
   })
   .catch(function (error) {
    console.log(error);
});
或者
axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

4.Moment.js(日期处理类库)

文档地址：http://momentjs.cn/docs/
安装

npm install moment --save

使用

import Moment from 'moment'//导入文件
Vue.prototype.$moment = Moment;//赋值使用

例：

this.$moment.locale('zh-cn');
let dateThree = this.$moment().format('YYYY-MM-DD');
console.log("dateThree:"+dateThree);
//dateThree:2019-07-25

5.D3.js(绘图类库)

文档地址：https://d3js.org/
安装

npm install d3 --save-dev

使用

import * as d3 from 'd3'
在单文件组件.vue中使用

例：

<template>
  <svg width="500" height="270">
    <g style="transform: translate(0, 10px)">
      <path :d="line" />
    </g>
  </svg>
</template>
<script>
import * as d3 from 'd3';
export default {
  name: 'vue-line-chart',
  data() {
    return {
      data: [99, 71, 78, 25, 36, 92],
      line: '',
    };
  },
  mounted() {
    this.calculatePath();
  },
  methods: {
    getScales() {
      const x = d3.scaleTime().range([0, 430]);
      const y = d3.scaleLinear().range([210, 0]);
      d3.axisLeft().scale(x);
      d3.axisBottom().scale(y);
      x.domain(d3.extent(this.data, (d, i) => i));
      y.domain([0, d3.max(this.data, d => d)]);
      return { x, y };
    },
    calculatePath() {
      const scale = this.getScales();
      const path = d3.line()
        .x((d, i) => scale.x(i))
        .y(d => scale.y(d));
      this.line = path(this.data);
    },
  },
};
</script>
<style lang="sass" scoped>
svg
  margin: 25px;
path
  fill: none
  stroke: #76BF8A
  stroke-width: 3px
</style>

6.vue-baidu-map（百度地图）

文档地址：https://dafrok.github.io/vue-baidu-map
安装

npm i --save vue-baidu-map

main.js注册

import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {
  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
  ak: 'YOUR_APP_KEY'
})

例：

<template>
  <baidu-map class="map">
  </baidu-map>
</template>

<style>
/* 地图容器必须设置宽和高属性 */
.map {
  width: 400px;
  height: 300px;
}
</style>

7.vue-amap（高德地图）

文档地址：https://elemefe.github.io/vue-amap
安装

npm install -S vue-amap

main.js注册

// 引入vue-amap
import VueAMap from 'vue-amap';
Vue.use(VueAMap);

// 初始化vue-amap
VueAMap.initAMapApiLoader({
  // 高德的key
  key: 'YOUR_KEY',
  // 插件集合
  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
  // 高德 sdk 版本，默认为 1.4.4
  v: '1.4.4'
});

使用

<el-amap vid="amapDemo" :zoom="zoom" :center="center">
</el-amap>