vue-cli脚手架中的组建（components）

1. vue-cli中，后缀为‘.vue’的文件的组成结构

test.vue

（1）style标签加上‘scoped’属性，那么当前这对style标签中的样式只作用与当前vue文件的DOM节点。

test.vue的style标签

  (2) vue-cli各个模块中的数据和函数要声明在export中。

test.vue

（3）在vue-cli中，要将data数据写成一个函数，在这个函数内部return一个对象，在这个对象内写当    前组建的数据，函数依旧写在methods这个属性中。

test.vue的script标签

  （4） 在template标签里不能直接调用函数和变量，需要一个父级标签（图中是div）。

test.vue

2. 将一个components下的一个test.vue文件作为组建导入（import）到App.vue文件中 

先将test.vue文件导出

test.vue

App.vue中导入test.vue组建并且引用它

App.vue

导入成功之后

localhost://8081页面

---

你所羡慕的一切，都是有备而来。