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）、组件中使用
<template>
<div>
<el-button type="danger">危险按钮</el-button>
</div>
</template> 注意：下图中的element标签属性应设置在标签上，如：
<el-button type="danger" size="small">危险按钮</el-button>
二、Vue + swiper
swiper地址:https://github.com/surmon-chi...
(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和官网的参数配置一起使用，需要什么参数就去官网找即可，就是比较麻烦而已。
<template>
<div>
<swiper :options="swiperOption">
<swiper-slide>I'm Slide 1</swiper-slide>
<swiper-slide>I'm Slide 2</swiper-slide>
<swiper-slide>I'm Slide 3</swiper-slide>
<swiper-slide>I'm Slide 4</swiper-slide>
<swiper-slide>I'm Slide 5</swiper-slide>
<swiper-slide>I'm Slide 6</swiper-slide>
<swiper-slide>I'm Slide 7</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
swiperOption:{
//这里配置的参数参考官网API设置，这里的pagination就是下图中的官方配置
pagination: {
el: '.swiper-pagination',
}
}
}
}
}
</script>
三、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代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>beijing</title>
//自适应屏幕调整相应的font-size值
<script>
(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)
</script>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
注意：这样在iPhone6中就得到，<html style="font-size: 20px;"> ，也就是1rem = 20px; 但是，当html设置的font-size小于16px时，它会以1rem = 16px进行计算，因为浏览器能识别的最小值为16px。
（4）、TestFont.vue组件中：
<template>
<div class="box">
<p>哈哈</p>
</div>
</template>
<script>
export default {
name: "TestFont",
}
</script>
<style scoped lang="less">
//box宽高为：200px*300px，这样直接做除法就可以了
.box{
width:200 / 20rem;
height:300 / 20rem;
background: #ff0;
}
</style>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。