Vue（七）：脚手架、render函数、ref属性、props配置项、mixin(混入)、插件、scoped样式

一、脚手架

Vue CLI（Vue Command Line Interface）Vue脚手架，Vue官方提供的标准化开发工具（开发平台）

安装node.js（安装保姆级别教程）

第一步：输入命令npm config set registry=http://registry.npm.taobao.org 配置镜像站，全局安装@vue/cil ，命令行输入npm install -g @vue/cli。命令行输入vue，不报错及安装成功
这里出现了vue版本过低的情况，需先卸载vue cli2，然后重新安装vue vli3。

1. 首先卸载旧版本npm uninstall vue-cli -g
2. 重新安装vue clinpm install vue-cli -g
3. 然后输入vue -V出现版本号
   
   第二步：切到要创建项目的目录(要在D盘下创建)，使用命令创建项目。输入vue create vue_test，选择vue2按下回车。
   

进入创建的目录里面cd vue_test，之后敲下npm run serve

第一个url即是内置服务器，第二个是局域网的其他人可以使用。
脚手架配置成功，如果要停止工程:连按两次Ctrl+C。

二、分析脚手架结构

这里借鉴ForMyself.博主整理的。

├── node_modules 
├── public
│   ├── favicon.ico: 页签图标
│   └── index.html: 主页面
├── src
│   ├── assets: 存放静态资源
│   │   └── logo.png
│   │── component: 存放组件
│   │   └── HelloWorld.vue
│   │── App.vue: 汇总所有组件
│   │── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 应用包配置文件 
├── README.md: 应用描述文件
├── package-lock.json：包版本控制文件

三、render函数

main.js文件，该文件是整个项目的入口文件

//引入Vue
import Vue from 'vue'
//引入App组件,它是所有组件的父组件
import App from './App.vue'

//创建Vue实例对象:vm
new Vue({
  el: '#app',
  //render的中文意思是渲染
  render: h => h(App),
})

1.vue.js与vue.runtime.xxx.js的区别

(1).vue.js是完整版的Vue，包含：核心功能+模板解析器。
(2).vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器。
因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数接收到的createElement函数去指定具体内容。 （引入残缺版本vue的原因，完整版占用内存太大）

2.render函数的意义

// render: function (createElement) {
    // console.log(typeof createElement);  
    //createElement是一个函数
//    return createElement(App);
//  }
  // 箭头函数render写法
  render: h => h(app)

render函数解析了vue中template函数的作用（标签<template>是可以用的，vue有这个库模板编译器）

四、修改默认配置

1. vue.config.js配置文件 可以对脚手架进行个性化定制。和webpack的写好的配置进行合并。
2. 使用vue inspect > output.js可以查看到Vue脚手架的默认配置。https://cli.vuejs.org/zh/
3. lintOnSave关闭语法检查，lintOnSave：false

五、ref属性

1. 被用来给元素或子组件注册引用信息（id的替代者）
2. 应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）
3. 使用方式：
   1. 打标识：<h1 ref="xxx">.....</h1>或 <School ref="xxx"></School>
   2. 获取：this.$refs.xxx

1.main.js

//引入Vue
import Vue from 'vue'
//引入App组件，它是所有组件的父组件
import App from './App.vue'
//关闭vue的生产提示
Vue.config.productionTip = false
//创建Vue实例对象---vm
new Vue({
  el: '#app',
  //render函数完成了这个功能：将App组件放入容器中
  render: h => h(App),
})

2.School

这里有一处报错，name:'School'处有问题。
解决方法：在前一行加入// eslint-disable-next-line，就不报错了。

<template>
  <div class="school">
    <h2>英文名字：{{ name }}</h2>
    <h2>花名：{{ address }}</h2>
  </div>
</template>

<script>
export default {
  // eslint-disable-next-line
  name: "School",
  data() {
    return {
      name: "程序媛",
      address: "野良",
    };
  },
};
</script>

<style>
.school {
  background-color: gray;
}
</style>

3.App.vue

<template>
  <div>
    <h1 v-text="msg" ref="title"></h1>
    <button @click="showDOM" ref="btn">点击输出上方DOM元素</button>
    <School ref="sch" />
  </div>
</template>

<script>
// 引入Elena组件
import School from "./components/School.vue";
export default {
  name: "App", //这里如果有名字，开发者工具里看到的就是这个名字
  components: { School },
  data() {
    return {
      msg: "放纵人生，享受世界",
    };
  },
  methods: {
    showDOM() {
      console.log(this.$refs.title); //h1真实DOM元素
      console.log(this.$refs.btn); //button真实DOM元素
      console.log(this.$refs.school); //School组件的实例对象vc
    },
  },
};
</script>

六、props配置

1. 功能：让组件接收外部传过来的数据

2. 传递数据：<Demo name="xxx"/>

在App.vue的组件标签中写属性

<template>
  <div>
    <Student name="野良" sex="女" :age="18" />
    <Student name="老王" sex="男" :age="45" />
  </div>
</template>

3. 接收数据：

（1）. 第一种方式（只接收）：props:['name']

props: ["name", "sex", "age"],

（2）. 第二种方式（限制类型）：props:{name:String}

props: {
    name: String,
    age: Number,
    sex: String,

（3）. 第三种方式（限制类型、限制必要性、指定默认值）：

props: {
    name: {
      type: String, //name的类型是字符串
      required: true, //name是必要的
    },
    age: {
      type: Number,
      defaule: 99, //默认值
    },
    sex: {
      type: String,
      required: true,
    },
  },

备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。如下列4

4. 子组件Student.vue

定义一个新的myAge来接收更改之后的年龄值，props优先级最高，先接收props中的数据放入vc中，接着再读取data中的数据，若data中数据有重复优先使用props中的数据，且不会覆盖。

<template>
  <div>
    <h1>{{ msg }}</h1>
    <h2>名字：{{ name }}</h2>
    <h2>性别：{{ sex }}</h2>
    <h2>年龄：{{ myAge + 1 }}</h2>
    <button @click="updateAge">尝试修改收到的年龄</button>
  </div>
</template>

<script>
export default {
  // eslint-disable-next-line
  name: "Student",
  data() {
    return {
      msg: "一个自学前端每天有点事干的女研究生",
      myAge: this.age,
    };
  },
  methods: {
    updateAge() {
      this.myAge++;
    },
  },
  
  props: {
    name: {
      type: String, //name的类型是字符串
      required: true, //name是必要的
    },
    age: {
      type: Number,
      defaule: 99, //默认值
    },
    sex: {
      type: String,
      required: true,
    },
  },
};
</script>

七、mixin混入

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

2. 使用方式：

新建一个minxin.js中
第一步定义混合：

// eslint-disable-next-line
export const a = { //暴露
    methods: {
        showName() {
            alert(this.name);
        },
    },
    mounted() {
        console.log('你好');//先
    }
}

第二步使用混入：
​ 全局混入：Vue.mixin(xxx)，不用引入，自动全部都有
​ 局部混入：mixins:['xxx']

1. 再组件中引入

import { a } from "../mixin";

2. 在组件中使用mixins: [a]

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

<script>
import { a } from "../mixin";
export default {
  /* eslint-disable */
  name: "School",
  data() {
    return {
      name: "程序媛",
      address: "昆明",
    };
  },
  mixins: [a],
  mounted() {
        console.log('组件里单独写mounted比mixin中的mounted后调用')//后
    }
};
</script>

注意：
1、混合里的mounted优先调用，组件里单独写mounted比mixin中的mounted后调用
2、组件里原来有的数据，在混合中写不会覆盖原数据；组件里原来没有的数据，混合中写会添加过去和原数据合并

八、插件

1. 功能：用于增强Vue

2. 本质：

包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。

3. 定义插件：

export default {
    install(Vue) {
        Vue.filter('mySlice', function (value) {
            return value.slice(0, 4)
        })
        //定义全局指令
        Vue.directive('fbind', {
            //指令与元素成功绑定时（一上来）
            bind(element, binding) {
                element.value = binding.value
            },
            //指令所在元素被插入页面时
            // eslint-disable-next-line
            inserted(element, binding) {
                element.focus()
            },
            //指令所在的模板被重新解析时
            update(element, binding) {
                element.value = binding.value
            }
        })
        //定义混入
        Vue.mixin({
            data() {
                return {
                    x: 100,
                    y: 200
                }
            },
        })

        //给Vue原型上添加一个方法（vm和vc就都能用了）
        Vue.prototype.hello = () => { alert('你好啊') }
    }

}

4. 使用插件：Vue.use()

use的作用就是帮忙调用插件对象中的install方法，而且还可以传一些参数给install函数。

//在main.js中引入插件并起个名儿
import plugins from './plugins';
//使用插件,要在new Vue之前使用
Vue.use(plugins, 1, 2, 3);

九、scoped样式

1.作用：让样式在局部生效，防止冲突。

不写scopedd的时候有冲突，后面覆盖前面的，后来者居上，听School。

2.写法：<style scoped>

只管当前组件的样式，不会冲突
指定使用 less写法：<style lang="less">，不写默认css

3.备注：

查看webpack所有版本 当前项目文件目录>npm view webpack versions
安装less版本7当前项目文件目录>npm i less-loader@7