vue——mixin、插件、scoped、less-loader

mixin(混入)

功能：可以把多个组件共用的配置提取成一个混入对象

使用方式：

第一步定义混合，例如：

//分别导出
export const xxx ={
	data(){.....},
	methods:{......}
	.....
}

第二步：使用混入，例如：

1. 全局混入：Vue.mixin(xxx)（在main.js中引入）
2. 局部混入：mixins[‘xxx’]（在export default {}里面引入，和data同级）

mixins文件

export const show = {
        methods: {
            showName() {
                alert(this.name)
            }
        },
    }
    // 分别导出

Student.vue

<template>
  <div>
    <p @click="showName">学生姓名：{{ name }}</p>
    <p>学生年龄：{{ age }}</p>
    <p>学生性别：{{ sex }}</p>
    <button @click="showAge">age++</button>
  </div>
</template>

<script>
// 引入minxin
// import { show } from "../mixin";
export default {
  name: "Student",
  data() {
    return {
      name: "张三",
      age: 22,
      sex: "男",
    };
  },
  methods: {
    showAge() {
      this.age++;
    },
    /* showName() {
      alert(this.name);
    }, */
  },
  //   局部引入
  //   mixins: [show],
};
</script>

<style>
</style>

School.vue

<template>
  <div>
    <p @click="showName">学校姓名：{{ name }}</p>
    <p>学校地址：{{ address }}</p>
  </div>
</template>

<script>
// 引入
// import { show } from "../mixin";
export default {
  name: "School",
  data() {
    return {
      name: "某某某学院",
      address: "南宁市",
    };
  },
  /* methods: {
    showName() {
      alert(this.name);
    },
  }, */
  // 混合就复用
  // mixins: [show],
};
</script>

<style>
</style>

import Vue from 'vue'
import App from './App.vue'
//全局导入
import { show } from './mixin'
Vue.mixin(show)
    // 关闭vue的生产提示
Vue.config.productionTip = false
new Vue({
    render: h => h(App),
}).$mount('#app')

插件

功能：用于增强Vue

本质：包含install方法的一个对象，install的第一个参数是Vue，后续的参数是插件使用者传递的数据

定义插件：

对象.install=function(Vue,options){
//1.添加全局过滤器
Vue.filter(...)
//2.添加全局指令
Vue.directive(...)
//3.配置全局混入(合)
Vue.mixin(...)
//4.添加实例方法
Vue.prototype.func=function(){....}
Vue.prototype.xxx=xxx
}

使用插件：

Vue.use(插件名)

plugins.js（与main.js同一级）

export default {
    install(Vue,x,y,z) {
        console.log(x, y, z);
        // 全局过滤器
        Vue.filter('mySlice', function(value) {
            return value.slice(0, 3)
        });
        Vue.directive('fbind', {
            // 指令与元素成功绑定时（一上来）
            bind(element, binding) {
                element.value = binding.value;
            },
            // 指令所在元素被插入页面时
            inserted(element) {
                // 自动获取焦点
                element.focus()
            },
            // 指令所在的模板被重新解析时
            updated(element, binding) {
                element.value = binding.value;
            },
        });
        // 混入
        Vue.mixin({
            methods: {
                showName() {
                    alert(this.name)
                }
            },
        });
        // 在Vue原型上添加一个方法（vc和vm都可以访问到）
        Vue.prototype.show = () => {
            alert('hello!！！！！！')
        };
        Vue.prototype.city = '南宁市西乡塘区'
    }
}

main.js

import Vue from 'vue'
import App from './App.vue'
// 导入插件
import plugins from './plugins'
// 关闭vue的生产提示
Vue.config.productionTip = false
    // use:应用插件
    // 使用plugins插件，可以传递参数
Vue.use(plugins,1,2,3)
new Vue({
    render: h => h(App),
}).$mount('#app')

Student.vue

<template>
  <div>
    <p>学生姓名：{{ name }}</p>
    <p>学生年龄：{{ age }}</p>
    <p>学生性别：{{ sex }}</p>
    <!-- plugins插件里面的方法 -->
    <button @click="show">点我有惊喜</button>
    <input type="text" v-fbind:value="name" />
  </div>
</template>

<script>
export default {
  name: "Student",
  data() {
    return {
      name: "张三",
      age: 22,
      sex: "男",
    };
  },
  methods: {},
};
</script>

<style>
</style>

School.vue

<template>
  <div>
    <!-- plugins插件里面的showName方法和全局mySlice过滤器 -->
    <p @click="showName">学校姓名：{{ name | mySlice }}</p>
    <!-- 在插件中定义的Vue原型上的属性 -->
    <p>学校地址：{{ city }}</p>
  </div>
</template>

<script>
export default {
  name: "School",
  data() {
    return {
      name: "某某某学院",
      // address: "南宁市",
    };
  },
};
</script>

<style>
</style>

scoped属性

作用：让样式在局部生效（当前vue文件内生效），防止冲突

<style lang='less' scoped>
/* scoped:当前样式只在当前页面有效 */

.styl {
  background: darkgoldenrod;
  .col {
    font-size: 26px;
    color: rebeccapurple;
  }
}
</style>

npm i less-loader		//默认安装最新版的less-loader

安装less-loader失败：直接安装安装less-loader，是安装最新版本，less最新版本是为了迎合webpack5版本。而项目里面的webpack版本是4.46.0（在node_modules/webpack/package.json查看版本信息）

npm view webpack versions		//查看webpack所有的版本
npm view less-loader versions		//查看less-loader所有版本

npm i less-loader@7			//安装7里面的最新版本

如果运行后有报错：Syntax Error: Error: Cannot find module 'less’

就在终端执行：npm install less --save-dev