Vue2（七）：配置脚手架、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 create name

然后进入新建的name项目文件目录中，输入命令：npm run serve
得到的第一个url即是你的内置服务器，第二个是同局域网的其他人可以使用

脚手架配置完毕
如果要停止工程:连按两次Ctrl+C即可。

二、分析脚手架结构

├── 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函数

如果使用ES6的模块化引入Vue，那么默认引入的是vue.runtime.esm.js，其中esm是ES6 module简写

1. 来看下main.js文件

该文件是整个项目的入口文件

//引入Vue
import Vue from 'vue'
//引入App组件,它是所有组件的父组件
import App from './App.vue'//创建Vue实例对象:vm
new Vue({el: '#app',//render的中文意思是渲染render: h => h(App),
})

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

（1）vue.js是完整版的Vue，包含：核心功能+模板解析器
（2）vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器。

因为vue.runtime.xxx.js没有模板解析器，所以不能使用template这个配置项，需要使用render函数接收到的createElement函数去指定具体内容。为什么其他的.vue文件里写template标签就行呢？那是因为template写的是标签，而且在组件里，鱿鱼西专门儿又搞了个库去专门解析组件里的模板

3. render函数是干啥的？

render中文意思是渲染，render函数其实就扮演了vue中解析template模板的那块儿代码，把组件的内容解析一下子，渲染到页面上。我理解的感觉render就是个钩子（可能不是），当需要解析模板渲染页面时拿过来用一下，返回组件里的东西们，然后放到页面上。

（1）写个正常的renderi函数：

 render: function (createElement) {// console.log(typeof createElement);  //createElement是一个函数return createElement(App);}

（2）render函数写成箭头函数：

render: h => h(app)

这个render函数理解的感觉不是很透彻，后面再回来看看

4. 为什么要引入残缺的vue呢？

vue.js是完整版的Vue，由核心和模板解析器组成。但是模板解析器占用的内存太大（占三分之一vue），开发完成后并不需要模板解析器。（模板解析器就像雇的贴瓷砖的工人，工人干完活儿就可以离开了，瓷砖就是那个Vue核心，就一直在那待着了）

四、脚手架的默认配置

vue.config.js配置文件

1. 使用 vue inspect > output.js可以查看到Vue脚手架的默认配置。
2. 使用vue.config.js可以对脚手架进行个性化定制，详情见：https://cli.vuejs.org/zh

五、ref属性，顺便看看main.js和App.vue长啥样

被用来给元素或子组件注册引用信息（id的替代者）
应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）
使用方式：

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.config.productionTip = false;// 创建一个Vue实例
new Vue({el: '#app',render: h => h(App)
});

2. MySchool

关于起名这块，想想非单文件组件，那里边我们写的时候，const School2 = Vue.extend({…})，然后下边components:{School1: School2}; 其实呢在单文件组件里，相当于是组件里写name:‘School2’，import School1，Vue开发者工具显示的是School2，但我们在代码里使用的是School1这个名字。

<template><div><h2>学校名称：{{ name }}</h2><h2>学校地址：{{ address }}</h2></div>
</templ