vue中的插件

vue提供install可供我们开发新的插件及全局注册组件等
install方法第一个参数是vue的构造器,第二个参数是可选的选项对象

export default {
	install(Vue,option){
		组件
		指令
		混入
		挂载vue原型
	}
}

全局注册组件

import PageTools from '@/components/PageTools/pageTools.vue'
import update from './update/index.vue'
import ImageUpload from './ImageUpload/ImageUpload.vue'
import ScreenFull from './ScreenFull'
import ThemePicker from './ThemePicker'
import TagsView from './TagsView'
export default {
  install(Vue) {
    Vue.component('PageTools', PageTools)
    Vue.component('update', update)
    Vue.component('ImageUpload', ImageUpload)
    Vue.component('ScreenFull', ScreenFull)
    Vue.component('ThemePicker', ThemePicker)
    Vue.component('TagsView', TagsView)
  }
}

在main.js中直接用引用并Vue.use进行注册

import Component from '@/components'
Vue.use(Component)

全局自定义指令

export default{
	install(Vue){
		Vue.directive('pre',{
			inserted(button,bind){
				button.addEventListener('click',()=>{
					if(!button.disabled){
						button.disabled = true;
						setTimeout(()=>{
							button.disabled = false
						},1000)
					}
				})
			}
		})
	}
}

在main.js跟注册组件一样

import pre from '@/aiqi'

Vue.use(pre)

scoped样式

什么是scoped

在vue文件中的 style 标签上,有一个特殊的属性:scoped。当一个 style 标签拥有 scoped 属性时,它的 CSS 样式就只能作用于当前的组件,也就是说,该样式只能适用于当前组件元素。通过该属性,可以使得组件之间的样式不互相污染。如果一个项目中的所有 style 标签全部加上了scoped,相当于实现了样式的模块化。

scoped实现原理

转译前:

<style scoped>
.example {
 color: red;
}
</style>
<template>
 <div class="example">hi</div>
</template>

转译后:

<style>
.example[data-v-5558831a] {
 color: red;
}
</style>
<template>
 <div class="example" data-v-5558831a>hi</div>
</template>

PostCSS 给一个组件中所有的 DOM 添加了一个独一无二的动态属性,然后给 CSS 选择器额外添加了一个对应的属性来选择该组件中的 DOM,这种做法使得样式只作用于含有该属性的 DOM ——组件内部 DOM 。

这样如果使用了 Ant Design for Vue 或者 Element UI 等第三方组件,就会出现 CSS 设置不起效的问题,无法通过 CSS 修改组件的样式。可以使用下面的方法来解决:

scoped穿透

当我们引入第三方组件库时(如使用vue-awesome-swiper实现移动端轮播),需要在局部组件中修改第三方组件库的样式,而又不想去除 scoped 属性造成组件之间的样式覆盖。这时我们可以通过特殊的方式穿透 scoped 。

  1. 使用 >>> 可以穿透 scoped 属性,修改其他第三方组件的样式。
<style>
.example[data-v-5558831a] {
 color: red;
}
</style>
<template>
 <div class="example" data-v-5558831a>hi</div>
</template>
  1. 使用曲线救国的一个方法,用两个 style 标签,一个带 scoped 属性,一个不带 scoped 属性,用来修改第三方组件的样式。
<style>
  /* 全局样式 */
</style>
<style scoped>
  /* 局部样式 */
</style>
  1. 使用 sass 或 less 的样式穿透 /deep/
<style scoped>
/deep/ .title {
  color: #888;
}
</style>
  1. 还有一种就是不使用 scoped 属性,通过在最外层加 id 或者 class 的形式进行区分。