Vue + 常用第三方插件 基础使用

一、Vue + element

1、element——>快速入手——>按需引入方式：

(1)、安装element-ui

//-S等同于：--save

//i是install的缩写

npm i element-ui -S

(2)、安装按需加载的依赖

//-D等同于：--save-dev

npm install babel-plugin-component -D

(3)、修改.babelrc文件为：

{

"presets": [

["env", {

"modules": false,

"targets": {

"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]

}

}],

"stage-2"

],

"plugins": ["transform-vue-jsx", "transform-runtime",["component", {

"libraryName": "element-ui",

"styleLibraryName": "theme-chalk"

}

]]

}

(4)、在main.js中配置

import { Button } from 'element-ui'

Vue.use(Button)

(5)、组件中使用

注意：下图中的element标签属性应设置在标签上，如：

危险按钮

二、Vue + swiper

(1)、安装:

npm install vue-awesome-swiper --save

(2)、两种引入方式:

① 全局引入方式：在main.js文件中引入

import Vue from 'vue'

import VueAwesomeSwiper from 'vue-awesome-swiper'

import 'swiper/dist/css/swiper.css'

//全局配置swiper

Vue.use(VueAwesomeSwiper)

② 局部引入：组件中引入

import 'swiper/dist/css/swiper.css'

import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {

components: {

swiper,

swiperSlide

}

}

(3)、组件中使用

注意：在使用的时候需要参照GitHub和官网的参数配置一起使用，需要什么参数就去官网找即可，就是比较麻烦而已。

export default {

name: 'HelloWorld',

data () {

return {

swiperOption:{

//这里配置的参数参考官网API设置，这里的pagination就是下图中的官方配置

pagination: {

el: '.swiper-pagination',

}

}

}

}

}

三、Vue + layzload

(1)、安装：

//-D等同于：--save-dev

npm install vue-lazyload -D

(2)、在main.js中引入：：

import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload)

(3)、在lazyload.vue组件中：

这样图片加载的过程中：先加载loading图片，再加载src路径图片，一旦出现错误将显示error图片。

四、Vue + rem + less

(1)、安装less

npm install less less-loader --save-dev

npm install style-loader css-loader --save-dev

(2)、配置webpack.base.conf.js

{

test:/\.less$/,

use:[

'style-loader',

'css-loader',

'less-loader'

]

}

(3)、在index.html文件添加js代码：

beijing

//自适应屏幕调整相应的font-size值

(function(doc,win){

var docEl = doc.documentElement,

//orientationchange 屏幕旋转事件

//首先判断窗口有没有orientationchange这个方法，有就赋值给变量，没有就返回resize方法.

resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

recalc = function (){

var clientWidth = docEl.clientWidth;

if(!clientWidth) return;

if(clientWidth >= 750){

docEl.style.fontSize = '100px';

}else{

docEl.style.fontSize = 40 * (clientWidth / 750) + 'px';

}

};

if(!doc.addEventListener) return;

win.addEventListener(resizeEvt,recalc,false);

//浏览器把DOM树构建完成后就触发了DOMContentLoaded事件,load事件则要等包括图片这些加载完毕才会触发；先是DOMContentLoaded发生，然后是load发生。

doc.addEventListener('DOMContentLoaded',recalc,false)

})(document,window)

注意：这样在iPhone6中就得到， ，也就是1rem = 20px; 但是，当html设置的font-size小于16px时，它会以1rem = 16px进行计算，因为浏览器能识别的最小值为16px。

(4)、TestFont.vue组件中：

export default {

name: "TestFont",

}

//box宽高为：200px*300px，这样直接做除法就可以了

.box{

width:200 / 20rem;

height:300 / 20rem;

background: #ff0;

}