1. 创建Vue脚手架
1.1 首先系统需要全局安装Vue脚手架
npm install -g @vue/cli1.2 创建Vue脚手架工程
进入你想创建vue脚手架的目录，然后输入命令
vue create xxx项目名需要注意的是工程名字不能大写，这里我们选择选择Vue2，敲下回车，那么vue将会为我们创建vue脚手架
?显示如图所示说明创建成功
如图命令所示 我们进入myvue工程，执行命令
npm run serve
然后浏览器访问http://localhost:8080/
?到这里 我们的vue脚手架工程就跑起来了，关闭为Ctrl+C
2. Vue脚手架的文件结构说明
├── 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：包版本控制文件
├── vue.config.js: 是一个可选的配置文件3. 修改默认配置
Vue-cli官网配置参考:https://cli.vuejs.org/zh/config/#publicpath
在工程根目录下创建文件vue.config.js
?这里我们演示配置一下语法检查
3.1 配置前
会发现，默认语法检查是开启的，然后我们写了一个function没有被使用的话就会导致整个项目启动不了，所以在实际开发中，会带来很多障碍，所以我们将它关闭。
3.2 配置后
在vue.config.js中，加入以下代码
4. render函数
在入口文件main.js中，render函数
为什么用render，而不用template ``语法？
因为考虑到引用的是残缺版的vue，无法解析template配置项的vue
关于不同版本的Vue：
1.vue.js与vue.runtime.xxx.js的区别：
(1).vue.js是完整版的Vue，包含：核心功能+模板解析器。
(2).vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器。
2.因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用
render函数接收到的createElement函数去指定具体内容。所以借助render，render内部做了什么:
举个例子：
render(createElement){
return createElement('h1','你好啊')
}
//或者这种写法
render: q=>q('h1','你好啊')
?总结：
????????render函数是vue中生成虚拟dom的底层api，可用于在组件封装中使用js编写动态模板，实现js的完全编程能力。
????????vue中在一些复杂场景下使用template模板不太方便，例如需要引入大量子组件时，使用template模板会使代码重复冗余，这时用render函数就可以轻松解决问题。
5. 标签中的ref属性
5.1 ref属性的作用
ref属性
- 被用来给元素或子组件注册引用信息（id的替代者）
- 应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）
- 使用方式：
打标识：<h1 ref="xxx">.....</h1>?或?<School ref="xxx"></School> 获取：this.$refs.xxx
作用就相当于给一个表情加了个id=“xxx” 然后通过document.getElementById(“xxx”)的效果一样。
5.2 示范
编写一个School.vue组件，然后在App.vue中引入
?我们访问网页 会发现，拿得到Dom元素，测试成功!
?
6. props配置?
6.1 功能
让组件接收外部传递过来的数据,从而达到组件复用的目的
(1).传递数据
<Demo name="xxx"/>
(2).接收数据
第一种方式(只接收):
props:['name']
?????????会发现以上会出现一个问题，如果我们需要传递18而显示19的话，那就需要做一下调整，因为默认传递过去的是一个字符串类型的数据，所以会造成字符串的拼接，所以我们得在传递的属性上面加 : 或者 v-bind ，他就会将表达式中的值正真的传递过去而不是以字符串的形式。
第二种方式(限制类型):?
props{
name:String
}
?会发现传递字符串的话就会报错，一样通过：或者v-bind解决
?第三种方式(限制类型、限制必要性、指定默认值)
props:{
name:{
type:String, //类型
required:true, //是否必传
default:'老王'//默认值
}
}
备注：props是只读的，不能修改,Vue底层会检测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。
如图所示:
总结：
