Vue 中plugins插件的使用

标签：插件 vue element Vue install plugins

1：说明

/*
## 插件

1. 功能：用于增强Vue

2. 本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。

3. 定义插件：

    ```js
    对象.install = function (Vue, options) {
        // 1. 添加全局过滤器
        Vue.filter(....)

        // 2. 添加全局指令
        Vue.directive(....)

        // 3. 配置全局混入(合)
        Vue.mixin(....)

        // 4. 添加实例方法
        Vue.prototype.$myMethod = function () {...}
        Vue.prototype.$myProperty = xxxx
    }
    ```

4. 使用插件：```Vue.use()```



*/

2：代码结构

3：代码内容

vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave:false /*关闭语法检查*/
})

main.js

 //引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue生产提示
Vue.config.productionTip=false;

// 引入插件
import plugins  from './plugins'
//应用插件
Vue.use(plugins)

// 创建Vm
const vm = new Vue(  {
        el:'#app',
        render: (h) => h(App)
   });

index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <!-- 针对ie浏览器的一个特殊配置，含义是让ie浏览器以最高的渲染级别进行渲染界面 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 开启移动端理想视口 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!-- 配置页签的图标 -->
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <!-- 配置网页的标题：找 package.json文件里的 "name": "vue_test" 值 -->
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <!-- 如果浏览器不支持js，则该标签的元素里的内容将会被渲染 -->
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <!-- 容器 -->
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

App.vue

 <!--

 -->

<template>
  <div>
    <hr/>
    <div class="divCss">
        <h1 class="h1Css">Vue中的 plugins插件</h1>
        <hr/>
        <!-- 调用组件，传递数据 -->
        <School/>
        <hr/>
        <Student />
        <hr/>

    </div>

  </div>
</template>

<script>

    import School from './components/School.vue';
    import Student from './components/Student.vue';


    export default {
        name:'App',
        components:{
            Student,
            School
        },
    }
</script>
<style>
   .divCss{
        background-color: chocolate;
        margin: auto;
        padding: 20px;
   }
   .h1Css{
        font-size: 36px;
        color: white;
   }

plugins.js

/*
## 插件

1. 功能：用于增强Vue

2. 本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。

3. 定义插件：

    ```js
    对象.install = function (Vue, options) {
        // 1. 添加全局过滤器
        Vue.filter(....)

        // 2. 添加全局指令
        Vue.directive(....)

        // 3. 配置全局混入(合)
        Vue.mixin(....)

        // 4. 添加实例方法
        Vue.prototype.$myMethod = function () {...}
        Vue.prototype.$myProperty = xxxx
    }
    ```

4. 使用插件：```Vue.use()```



*/

export default{
    /* Vue入参 为vue 对象的构造器 */
    install(Vue){
        console.log("@@@@@@@@@@@@@@@@@@@@@@install@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@",Vue);
        //全局过滤器
        Vue.filter('mySlice',function(value){
            return value.slice(0,4)
        }) ;
        //全局自定义指令
        Vue.directive("fbind",{
            //指令与元素成功绑定时（一上来）
            bind(element,binding){
                //console.log("fbind.bind",this);//注意此处的this是window
                element.value = binding.value;
            },
            //指令所在元素被插入页面时
            inserted(element,binding){
                //console.log("fbind.inserted",this);//注意此处的this是window
                element.focus();
            },
            //指令所在的模板被重新解析时
            update(element,binding){
                //console.log("fbind.update",this);//注意此处的this是window
                element.value = binding.value;
            }
        })
        Vue.directive('big1',function(element,binding){
            //console.log('big1',this);//注意此处的this是window
            element.innerText=binding.value * 1000;
        });
        // 全局混入
        Vue.mixin({
            data () {
                return {
                    x:100,
                    y:100
                }
            }
        })
        // 给Vue原型上添加1个方法
        Vue.prototype.hello=()=>{alert('你好啊！')}

    }

}

Student.vue

<!--

 -->
<template>
    <div  class="schoolClassStyle">
      <h1  style="color:red">{{msg}}</h1>
      <h2  >学生名称：{{name}}</h2>
      <h2>学生性别：{{sex}}</h2>
      <input type="text" v-fbind:value="name"  style="margin-left:10px;"/><span style="color:dimgrey;font-size: 9px;padding: 20px;margin-left: 20px;">测试插件的全局绑定 </span>
      <button @click="clickHelloInfo">点击测试插件的属性hello方法</button>
      <br/>
    </div>
</template>

  <script>
      export default {
        name:'Student',
        data () {
          return {
            msg:'学生信息',
            name:'向北',
            sex:'男'
          }
        },
        methods:{
          clickHelloInfo(){
            this.hello()
          }
        }

      }
  </script>

  <style>
    .schoolClassStyle{
      background-color: aquamarine;
    }
  </style>

School.vue

<!--

 -->
<template>
    <div  class="schoolClassStyle">
      <h1  style="color:red">{{msg}}</h1>
      <h2  >学校名称：{{name | mySlice}}<span style="color:dimgrey;font-size: 9px;padding: 20px;margin-left: 20px;">      测试插件中全局管道符</span></h2><!-- 给学校名称属性name 增加1个 mySlice的过滤器属性 -->
      <h2>学校地址：{{address}}</h2>
    </div>
</template>

  <script>
      export default {
        name:'School',
        data () {
          return {
            msg:'学校信息',
            name:'华南师范大学',
            address:'广州市天河区中山大道西55号'
          }
        },

      }
  </script>

  <style>
    .schoolClassStyle{
      background-color: aquamarine;
    }
  </style>