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

时间 2019-12-05

标签 vue 经常使用第三方插件基础繁體版

原文原文链接

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

1、Vue + element

一、element——>快速入手——>按需引入方式：
（1）、安装element-uicss

//-S等同于：--save
    //i是install的缩写
    npm i element-ui -S

（2）、安装按需加载的依赖html

//-D等同于：--save-dev
   npm install babel-plugin-component -D

（3）、修改.babelrc文件为：vue

{
  "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中配置webpack

import {  Button } from 'element-ui'
Vue.use(Button)

（5）、组件中使用git

<template>
    <div>
      <el-button type="danger">危险按钮</el-button>
    </div> 
</template>

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

<el-button type="danger" size="small">危险按钮</el-button>

2、Vue + swiper

swiper地址: https://github.com/surmon-chi...

(1)、安装:github

npm install vue-awesome-swiper --save

(2)、两种引入方式:web

① 全局引入方式：在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和官网的参数配置一块儿使用，须要什么参数就去官网找便可，就是比较麻烦而已。npm

<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>

3、Vue + layzload

(1)、安装：element-ui

//-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图片。

4、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>

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

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

1、Vue + element

2、Vue + swiper

3、Vue + layzload

4、Vue + rem + less

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

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