VUE框架CLI组件化插件的使用------VUE框架

旧约Alatus

已于 2023-12-06 23:52:50 修改

阅读量967

点赞数 13

分类专栏： # VUE框架前端文章标签： vue.js javascript 前端前端框架 ecmascript vue js

于 2023-12-06 11:38:00 首次发布

本文链接：https://blog.csdn.net/2201_75960169/article/details/134827719

版权

前端同时被 2 个专栏收录

334 篇文章 2 订阅

订阅专栏

VUE框架

250 篇文章 0 订阅

订阅专栏

// 每一个插件都是一个对象
export const p1 = {
    // 每一个插件都必须有一个install方法
    // 这个方法会被自动调用
    // 这个方法包含两个部分
    // 第一部分,Vue的构造函数
    // 第二部分,可以接受使用插件时传递过来的数据,数量无限制
    install(Vue,a,b,c,d){
        console.log("这个插件显示了一个可爱的封面");
        console.log(Vue);
        console.log(a,b,c,d);
        // 拓展一个counter属性
        // 拓展完了以后到处都可以用的
        Vue.prototype.counter = 1000;
    }
}
// 暴露插件
// 每一个插件都是一个对象

export const p1 = {

// 每一个插件都必须有一个install方法

// 这个方法会被自动调用

// 这个方法包含两个部分

// 第一部分,Vue的构造函数

// 第二部分,可以接受使用插件时传递过来的数据,数量无限制

install(Vue,a,b,c,d){

console.log("这个插件显示了一个可爱的封面");

console.log(Vue);

console.log(a,b,c,d);

// 拓展一个counter属性

// 拓展完了以后到处都可以用的

Vue.prototype.counter = 1000;

}

}

// 暴露插件

// 这句话就等同于我们写的<script src="vue.js">
// 这就是在引入vue
import Vue from 'vue';
// 然后下一步是导入我们的根组件
import App from './App.vue';
// 导入混入
import {mix1} from './mixin.js';
import {mix2} from './mixin.js';
import {mix3} from './mixin.js';
// 导入插件
import {p1} from './plugins';

//全局混入
Vue.mixin(mix1);
Vue.mixin(mix2);
Vue.mixin(mix3);

// 插件的使用通常放在创建Vue对象之前
// 插上插件
Vue.use(p1,1,2,3,4);

// 这是关闭生产提示信息
Vue.config.productionTip = false

// 创建VUE实例对象VM
new Vue({
  // 删除render函数就会导致报错
  // 因为没有可用的模板翻译器
  // 使用完整的vue.js或使用render函数才能解决这个问题
  // 为什么采用模板编译器的Vue.js放到脚手架呢?
  // 目的是减小体积,VUE.js包括两类,核心和模板编译器
  // 模板编译器可能占用vue.js体积的三分之一
  // 将来打包的时候,模板编译器没有存在的必要了
  // 体积大就会影响速度
  // render函数被自动调用,且会自动传过来一个参数
  // 这个参数是一个函数,createElement是一个函数
  // 这个函数可以用来创建元素
  // 用这个来创建元素就可以省掉我们的vue模板编译器了
  // render(createElement)
  // {
  //   return createElement(App);
  // }
  // 简写就是这个箭头函数
  render: h => h(App)
}).$mount('#app');
// 这里用的是$mount的方式绑定和el的方式是一样的
// 这句话就等同于我们写的<script src="vue.js">

// 这就是在引入vue

import Vue from 'vue';

// 然后下一步是导入我们的根组件

import App from './App.vue';

// 导入混入

import {mix1} from './mixin.js';

import {mix2} from './mixin.js';

import {mix3} from './mixin.js';

// 导入插件

import {p1} from './plugins';

//全局混入

Vue.mixin(mix1);

Vue.mixin(mix2);

Vue.mixin(mix3);

// 插件的使用通常放在创建Vue对象之前

// 插上插件

Vue.use(p1,1,2,3,4);

// 这是关闭生产提示信息

Vue.config.productionTip = false

// 创建VUE实例对象VM

new Vue({

// 删除render函数就会导致报错

// 因为没有可用的模板翻译器

// 使用完整的vue.js或使用render函数才能解决这个问题

// 为什么采用模板编译器的Vue.js放到脚手架呢?

// 目的是减小体积,VUE.js包括两类,核心和模板编译器

// 模板编译器可能占用vue.js体积的三分之一

// 将来打包的时候,模板编译器没有存在的必要了

// 体积大就会影响速度

// render函数被自动调用,且会自动传过来一个参数

// 这个参数是一个函数,createElement是一个函数

// 这个函数可以用来创建元素

// 用这个来创建元素就可以省掉我们的vue模板编译器了

// render(createElement)

// {

// return createElement(App);

// }

// 简写就是这个箭头函数

render: h => h(App)

}).$mount('#app');

// 这里用的是$mount的方式绑定和el的方式是一样的

export const mix1 = {
    methods : {
        printInfo(){
            console.log(this.name);
            console.log(this.age);
            // 可以访问通过插件拓展的counter
            console.log(this.counter);
        }
    }
}

export const mix2 = {
    methods : {
        a(){
            console.log("Mix a....");
        }
    }
}

export const mix3 = {
    mounted(){
        console.log("mix Mounted");
    }
}
export const mix1 = {

methods : {

printInfo(){

console.log(this.name);

console.log(this.age);

// 可以访问通过插件拓展的counter

console.log(this.counter);

}

}

}

export const mix2 = {

methods : {

a(){

console.log("Mix a....");

}

}

}

export const mix3 = {

mounted(){

console.log("mix Mounted");

}

}