↵
对于做项目而言,一千个程序员有一千种解决方式。
作为程序员,我认为每一个程序员都有为自己程序正言的机会。不过依个人愚见,虽然我们不能选择做什么样的项目,但是我们能选择把这个项目用什么样的形式来完成,无论是代码臃肿的犹如被胖揍的猪头,还是富丽堂皇的云端语法,抑或是归入凡尘的简朴素雅,都是我们的辛勤劳动。但,作为一个优秀的程序员,一个不甘心只用勤劳双手搬砖的码农,我们应该学会不断进步,不断突破,只要今天的自己能比昨天的自己更强,就已经足够了,毕竟,成长也不是一朝一夕,谁能指望自己能一口吃成一个胖子呢!
进步,从此刻开始!
这几天,公司与其他公司对接后,产品型号和后端协议都所改变,导致前端的一些验证信息也有所变化。虽然改动的不是很多,但是由于之前的负责人请假,加之很多页面的代码没有统一的进行管理,导致修改起来确实是挺麻烦的。不是很难,但就是废眼睛,搞得我现在都不太敢看电视剧和打游戏了,因为太消耗眼睛了,看久了容易变兔子,所以没事的时候建议闭目养神。
言归正传,因为之前没有统一进行管理,所以导致一个项目中的每个模块都有些四分五裂,加之参数都大同小异,方法也都差不多,所以我想了一下,要不多要点时间来完成这个任务,直接把这些通用的功能和验证信息用全局配置好了,这样每个模块该用就用,也不影响,主要是好几个项目,然后每个项目好几个模块,都被各位老大哥四分五裂,让我这个小弟改起来很受伤,倒不如这次多花点时间配置好,下次就不用这么麻烦了,还可以喝喝茶,养养神,提前进入老年生活。于是我把建议和前端组长说了一下。啪,很快啊,组长二话不说就把任务时间给我加长了一倍!毕竟,年轻程序员讲武德,老大哥能不开心?以下是我的使用心得以及学到的一些知识,当然,还是和之前一样,都是用的简单demo,毕竟公司的代码肯定不能直接拿来用。
myPlugin的意思是插件,那么插件可以做什么事情呢?
先上结论:Plugins可以做4件事情:
1.可以设置一些全局方法
2.可以绑定一些过滤器,一些指令,全局组件
3.可以设置一些全局混入
4.可以定义一些Vue的原型属性
1.全局方法的使用,项目结构如下:
这是vue-cli初始化的一个vue项目,不过以后可能不会再用webpack搭建项目了(毕竟vue-cli就是基于webpack创建的一个基础脚手架),我也要开始学习使用Vite了,因为尤大不是都对webpack的老大哥说过了嘛,再也不回去webpack了!哎,希望有一天我也能对尤大说一句再也回去Vue了,哈哈,大家一起加油吧,说不定下一个尤大正在看着我的博客呢,哈哈,希望各位未来的尤大以及超越尤大的大帅逼大漂亮们给我点个赞,谢谢了
先上效果图:
项目代码如下:
HelloWorld.vue
<template>
<div class="hello">
<h1>myPlugin学习</h1>
<p>全局方法的使用</p>
</div>
</template>
myPlugin.js
const myPlugin = {}
//一定要在对象中使用install这个函数,因为这个install函数在源码的解析层面能起到很大的作用
//详情请看main.js注解
myPlugin.install = function(Vue,option){
Vue.myGlobalMethod1 = function(){
console.log("我是myPlugin的全局方法1!")
}
Vue.myGlobalMethod2 = function(){
console.log("我是myPlugin的全局方法2!")
}
}
export default myPlugin
index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import VueRouter from 'vue-router'
Vue.use(Router)
const routes = [
{
path: '/',
name:'HelloWorld',
component: HelloWorld
}
]
const routers = new VueRouter({
//一个偏爱history模式的骚年,至于为什么不喜欢hash,是因为不喜欢后面带的"#"
//不过hash模式就是通过"#"来定位的,所以它并没有做错什么
//如果没有这个爱好的小伙伴直接用默认的hash模式就可以了
mode: 'history',
routes
})
export default routers
main.js(请详看注解)
import Vue from 'vue'
import App from './App'
import router from './router'
import myPlugin from './libs/muplugin' //在这里引入myPlugin对象
Vue.config.productionTip = false
//在Vue的源码解析层次,使用Vue.use()方法注册插件,这个插件可以是任意一个函数或者任意一个带有install属性的对象
//但是不管是函数还是带有install方法,第一个参数总是Vue对象,请详看myPlugin中install函数的写法,第一个参数写的就是Vue(当然,这只是一个形参,也可以写成其他的)
//不过建议各位把需要的功能和方法之类的封装在install方法中,这样不仅看起来美观大方,而且函数内的this始终指向myPlugin这个对象(自己定义),易于扩展
Vue.use(myPlugin) //在Vue的全局使用myPlugin这个插件
Vue.myGlobalMethod1() //直接调用
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>',
created(){
console.log("当前的生命周期为created")
Vue.myGlobalMethod2() //在Vue的生命周期中使用
}
})
我在这里示范一下,如果我们把myPlugin.js中的myPlugin对象中的install方法转为其他的方法,那么会发生什么?还是先上效果图:
各位可以看到,啪,很快啊,它立马就报错了!
现在的myPlugin.js
const myPlugin = {}
//我仅仅只是把install()改为了installed(),导致在Vue.use()加载这个插件的时候无法识别这个方法了
myPlugin.installed = function(Vue,option){
Vue.myGlobalMethod1 = function(){
console.log("我是myPlugin的全局方法1!")
}
Vue.myGlobalMethod2 = function(){
console.log("我是myPlugin的全局方法2!")
}
}
export default myPlugin
2.可以绑定一些过滤器,一些指令,全局组件( 项目结构仍然不变 ,代码只提供改变了的文件,其余文件仍然沿用上续1中的代码)
先上效果图:
HelloWorld.vue
<template>
<div class="hello">
<h1>myPlugin学习</h1>
<p v-my-component="" style="color:red">自定义指令</p>
</div>
</template>
myPlugin.js
const myPlugin = {}
myPlugin.install = function(Vue,option){
//全局指令,这个其实就相当于是v-model,v-if之类的,现在绑定了一个输出函数
//只要有标签使用这个自定义指令,就会在控制台输出相应的指令
Vue.directive('my-component',{
bind(){
console.log("现在这个数据是存在的!")
}
})
}
export default myPlugin
main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import myPlugin from './libs/muplugin' //在这里引入myPlugin对象
Vue.config.productionTip = false
Vue.use(myPlugin) //在Vue的全局使用myPlugin这个插件
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
3.可以设置一些全局混入(项目结构仍然不变 ,代码只提供改变了的文件,其余文件仍然沿用上续1中的代码)
先上效果图:
myPlugin.js
const myPlugin = {}
myPlugin.install = function(Vue,option){
Vue.mixin({
mounted(){
console.log("我是全局混入(mixin)函数")
}
})
}
export default myPlugin
HelloWorld.vue
<template>
<div class="hello">
<h1>myPlugin学习</h1>
<p style="color:red">自定义指令</p>
</div>
</template>
4.可以定义一些全局原型属性(项目结构仍然不变 ,代码只提供改变了的文件,其余文件仍然沿用上续1中的代码)
先上效果图:
myPlugin.js
const myPlugin = {}
myPlugin.install = function(Vue,option){
//在Vue的原型上绑定属性,供全局使用
Vue.prototype.realName = '兵锅锅你好!'
}
export default myPlugin
HelloWorld.vue
<template>
<div class="hello">
<h1>myPlugin学习</h1>
<p style="color:red">{{ this.realName }}</p>
</div>
</template>
想必大家看到此处,可能觉得plugin使用起来挺方便也挺简单的,但这仅仅只是因为我把这些功能都拆开讲解了,而且都是用的最简单的案例。如果真的想深入学习,还是得在项目中实战,但是这些思想其实都是相通的,这些基础就好比是砖瓦,是各种工具,项目就是房子,所有的工具都有了,只有不断地练习,不断地学习,不断的磨练,才能造就好房子,就好比打太极,一定要选择69的老同志下手,哈哈!
加油吧,各位,我们都是最棒的,奥里给!