Vue-实例化对象与组件嵌套、css作用域

vue

Vue创建项目有两种方式：CDN方式和搭建脚手架方式

真实项目开发使用脚手架来进行开发，原因是脚手架使开发速度更快，并且可以使用更新更主流的方法。

Vue CLI脚手架：（部分好处）

（1）脚手架其实就是通过webpack搭建的开发环境；

（2）使用ES6语法，不会担心浏览器是否兼容ES6语法，因为脚手架已经有一些相关的loder，在打包文件的时候，自动将ES6变成ES5，使浏览器正常识别。

（3）打包和压缩JS为一个文件

（4）项目文件直接在环境中编译，而不是浏览器中（速度快）

（5）实现页面自动刷新

1、实例化对象

App.vue为根组件

index.html为当前项目的入口文件

2、组件嵌套

如果想要添加组件并将它显示在index.html中，则有两种方式，如下图

相应的在App.vue中需要添加上相应的标签，如下图

‘’

但本质上来讲，在注册组件时一般都注册局部组件，除非有业务要求，根据实际需要来确定

局部注册组件直接在App.vue中引入就可以了

注：对应组件的名称，不能与系统的标签名称相同

3、Css作用域

样式效果如图