vue各种安装和使用

一、vue UI安装

Vue~UI官网链接

在项目里发 npm i element-ui -S

然后再main.js里面复制

import Vue from 'vue'; //创建项目的时候应该有 不用复制
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';  //创建项目的时候应该有 不用复制

Vue.use(ElementUI);

二、vue  echarts安装

老师博客

第一步：安装echarts依赖

npm install echarts -S

第二步：在main.js中全局引入

import * as echarts from 'echarts';
Vue.prototype.$echarts = echarts

第三步：在你的组件或页面中 a.vue

<div id="myChart" :style="{width: '600px', height: '600px'}"></div>

js部分代码：
export default {
  mounted(){
    this.drawLine();
  },
  methods: {
    drawLine(){
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
        xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line'
    }]
        });
    }
  }
}

 三、vue中动画animate插件使用

炫酷特效

第一步：安装animate依赖

npm install animate.css --save

第二步：单独引入到需要使用的文件里面

require('animate.css')

第三步：哪里需要加哪里transtion标签

 <transition enter-active-class="animate__animated animate__zoomIn"

        leave-active-class="animate__animated animate__zoomOut">

  </transition>

四、vue中cookie安装

  参考

1.安装vue-cookies

npm install vue-cookies --save

2.引入vue-cookies

安装完毕后，我们需要在vue项目中明确引入vue-cookies。 引入daomain

1. import Vue from 'vue'

2. import VueCookies from 'vue-cookies'

3. Vue.use(VueCookies)

3.API

-设置全局配置，设置cookie过期时间和url

3.1设置cookie

this.$cookies.set('keyName',data)

3.2获取cookie

this.$cookies.get('keyName')

4.3-删除cookie

this.$cookies.remove(keyName [, path [, domain]]) // return this

4.5检查某个 cookie name是否存在

this.$cookies.isKey(keyName)        // return false or true

4.6获取所有 cookie name，以数组形式返回

this.$cookies.keys() 

4.设置cookie过期时间

4.1全局设置

// 30天后过期
this.$cookies.config('30d')
 
this.$cookies.config(new Date(2019,03,13).toUTCString())
 
this.$cookies.config(60 * 60 * 24 * 30,'');
 
// window object
window.$cookies.config('30d')

4.2单个name设置

this.$cookies.set('names',data,'3y')   //3年过后到期

this.$cookies.set('names',data,'3m')  //3月过后到期

this.$cookies.set('names',data,'3d')   //3天过后到期

this.$cookies.set('names',data,'24h')   //24小时过后到期

this.$cookies.set('names',data,'30min')   //30分钟过后到期

this.$cookies.set('names',data,'60s')   //60s过后到期