Vue脚手架的使用

提示：本文主要对Vue-cli脚手架进行总结

文章目录 前言一、创建Vue脚手架1、初始化脚手架2、具体步骤 二、分析脚手架结构1、根目录下的文件2、src2.1 main.js2.2 app.vue 3、public3.1 index.html 4、render函数4.1 使用完整版vue4.2 引入残缺版vue，使用render函数4.3 总结 三、修改脚手架的默认配置四、文件架构五、ref属性六、props配置1、简单实现2、限制传参3、完整props4、尝试修改年龄5、总结 七、mixin混入八、插件8.1 实现步骤8.2 插件的功能8.3 总结 九、scoped样式

---

前言

提示：这里可以添加本文要记录的大概内容：

	我们已经学习了Vue里的组件化，在里面我们知道，组件一般要配合脚手架vue-cli来使用，
本篇文章将对	vue的脚手架进行总结

---

提示：以下是本篇文章正文内容

一、创建Vue脚手架 1、初始化脚手架

2、具体步骤

二、分析脚手架结构 1、根目录下的文件

2、src 2.1 main.js

2.2 app.vue

3、public 3.1 index.html

4、render函数

先去掉render函数，按照我们自己的的逻辑注入组件，发现报错

验证

4.1 使用完整版vue

4.2 引入残缺版vue，使用render函数

1、验证

验证2

验证3 

简写

4.3 总结

三、修改脚手架的默认配置

脚手架依靠webpack实现功能

修改默认配置，需要vue.config.js

关闭语法检查

四、文件架构

五、ref属性

如果给一个组件加上ref，会输出什么呢？

这里的this.$refs.sch 是School组件的vc

六、props配置 1、简单实现

2、限制传参

3、完整props

4、尝试修改年龄

5、总结

七、mixin混入

全局混入

八、插件 8.1 实现步骤

vue里的插件本质就是对象

8.2 插件的功能 8.3 总结

九、scoped样式