23插件

# 插件

官网：使用插件 (opens new window)

vant
fastclick
vuex
vue-router
axios //不是一个插件 他是一个封装过了js函数库

1
2
3
4
5

# 使用插件逻辑

# 安装

npm install vue-vuex -S

# 输出

// 创建文件... 比如我的——src/store/index.js
import Vue from "vue" //引入vue
import Vuex from "vuex" //引入vuex

Vue.ues(Vuex) //使用插件

export default new Vuex.Store({ //输出vuex插件
	//这里写vuex的配置
})

1
2
3
4
5
6
7
8
9

# 引入

// src/main/.js
import store from "@/store/index.js" //引入vuex插件

new Vue({
    store,
})

1
2
3
4
5
6

# 开发插件

使用

Vue.use(MyPlugins,Options);

# 创建插件

# 输出

// src/plugins/test.js
import Vue from "vue"; //引入vue
const MyPlugins = {}; //定义插件

MyPlugins.install = function (Vue,options) {
  // 全局方法
  Vue.xxx = function () {
    console.log(123);
  };
  // 实例方法
  Vue.prototype.yyy = function () {
    console.log(456);
  };
  //全局指令
  Vue.directive("myfocus", {
    inserted(el) {
      el.focus(); //获取焦点
    },
  });
};

//使用插件
Vue.use(MyPlugins,options);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 引入

// src/main.js
import "@/plugins/test.js" //自定义插件

1
2

# 调用

<templat>
    <div>测试
    	<input type="text" v-myfocus /> //使用指令
    </div>
</templat>
import Vue from "vue";
<scrpit>
	export default {
        Vue.xxx(); // 全局方法
        this.yyy();// 实例方法
    };
</scrpit>

1
2
3
4
5
6
7
8
9
10
11
12

编辑

上次更新: 2023/08/06, 00:38:41

← 22渲染函数 24VueConfig→