vue-vue2脚手架4-插件,scoped样式

vue-vue2脚手架4-插件,scoped样式

插件

1. 功能：可以把多个组件共用的配置提取成一个混入对象
2. 使用方式：

第一步定义混合：

```
{
    data(){....},
    methods:{....}
    ....
}
```

第二步使用混入：

​	全局混入：```Vue.mixin(xxx)```
​	局部混入：```mixins:['xxx']	```

插件

 1. 功能：用于增强Vue
 2. 本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。
 3. 定义插件：

对象.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()

创建 plugins.js

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

//应用（使用）插件
Vue.use(plugins,1,2,3)
//创建vm
new Vue({
	el:'#app',
	render: h => h(App)
})

使用插件
main.js

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

//应用（使用）插件
Vue.use(plugins,1,2,3)
//创建vm
new Vue({
	el:'#app',
	render: h => h(App)
})

scoped样式

1. 作用：让样式在局部生效，防止冲突。如两个vue里面都定义了 demo.css将会造成冲突，携带 scoped 可以避免这个问题
2. 写法：```<style scoped>```
3. lang='less'  可以指定使用语言。默认使用css