10.8 Vue框架-脚手架

hello大家好，许久不见，甚是想念，已经一个月没有更新博客了，并不是不想更新，而是学习的进度在不停的往前赶，很多知识都无法及时理解，所以要反复去学习，博客更新就慢慢放在脑后了，从今天开始我会把博客作为一个我学习记录的地方，记录一些平常学习过程中我觉得需要记住的重要知识。

在经历了一个多月学习，经历了js基础以及高级，BOM和DOM，ES6语法的接连学习轰炸之后，终于来到了Vue框架部分，以后写项目用到的主力工具，目前我学习的是Vue2，今天学习完有空闲时间，想记录一点东西在此。

1.脚手架

想记录的这个东西叫脚手架，它是Vue中的一个工具，脚手架的含义就是从工地那边来的，脚手架是为了保证各施工过程顺利进行而搭设的工作平台。

在前端范畴中 脚手架是一个工具，安装完脚手架之后可以通过一些命令来快速实现我们项目基础环境的搭建，不用一个一个自己去配置各种文件，帮我们自动生成了规范性的项目文件目录。

关于脚手架的安装可以前往Vue的官网自行安装，我就不过多赘述了，官网的网址是：Vue.js (vuejs.org)，安装完成之后，在VScode中或者HBuilder中打开Vue.cil的脚手架文件，在终端运行的环境下输入npm run serve,然后会生成一个本地网址，这就是脚手架搭建的一个空间，我们可以在里面自行编写自己想写的东西，如图所示：

 红色方框框出来的就是本地网址，可以直接打开，然后我们就可以进行编写。

2.编辑

Vue编写代码讲究组件化：

2.1父组件

红色方框框的都是我们编写的组件，其中App.vue为最大的一个组件，我称其为父组件，然后在components文件夹下创建的组件我统一称他们为子组件，其中子组件的值可以传递到父组件当中，方法是将一个完整的前端页面用模块化思想分隔开，每一个模块写一个对应的组件，在这里我写了三个组件，分别是一个页面中的头部，身体和底部，在父组件中我们就要在template的盒子中写对应的代码代替三个部分，然后将子组件的数据引入，最后要在components中写你引入的子组件名称，三个地方：

 

 图中三个红框位置就为父组件需要写的东西，需要注意的是我把css样式都写在父组件里的style中了，在图上只是折叠起来了，其实也可以分别将每个部分的css样式写在对应的子组件中然后引入的，效果都是相同的。

2.2.子组件

子组件做的就是把html的页面样式写在子组件的盒子中，然后用export default将值释放出去，让父组件接收，子组件的书写方式比较容易，如下所示：

后面两个子组件的书写方式都是类似的：

 

 

由于时间原因子组件脚手架子组件的值引入父组件就先介绍到这里，明天我来说一下父组件的值如何引入子组件，其实上面的代码中已经写出来了，明天我来详细介绍一下，谢谢大家的观看。