vue-cli构建的项目，vue组件和根实例的关系

一、问题

学习vue.js，根据资料，直接用vue-cli构建的项目。想像其它项目一样，如Java的项目，在这个基本的框架上，做几个基本的练习，把教程中的内容都练习一下。
搜索菜鸟教程vue.js教程，想直接按照例子写，出现问题了。
例如，条件判断使用 v-if 指令：

照内容，新建一个Study.vue文件组件，这里直接用 new Vue（）来写，路由配置好，但是页面进入后是空白，控制台输出
Uncaught ReferenceError: Vue is not defined
所以想不明白，照着例子都不出，错到哪里了？

二、查找原因

关键字：vue组件和根实例的关系，cli项目vue组件

1、vue组件和根实例的关系

找了很多文章，才明白了这个关系：
1.整个项目是一个vue的实例
2.每个页面或者每个组件是一个vue component的实例

Vue实例
通过vue开发的单页面项目，一个项目就一个Vue实例，也就是通过new vue语句创建的对象。要显示出来，就得挂载。
main.js中

new Vue({
  el: "#app", //挂载点，作用域是index.html中的<div id="app"></div>
  router,
  components: { App }, //将引入过来的App声明为局部组件App, {App: App}
  template: "<App/>" //创建template, 用App这个组件替换index.html中的<div id="app"></div>
});

严格来说，通过new Vue（）方式创建的实例叫做根实例，所有的Vue.js组件其实都是被扩展的Vue实例。

Vue的核心是组件，一切可以看见的东西都是组件构成的。然后通过把不同的组件主和嵌套在一起，最终组成了一个根组件，就是App。根据组件会挂载到Vue的根实例中，而Vue根实例本身也是相对于一个组件，然后挂载到真实的HTML中。

有了上述的概念，就好理解了vue-cli构建的项目结构。
再来看下面的图，页面结构：

1、整个项目是一个主文件index.html,
2、index.html中会引入src文件夹中的main.js，
3、main.js中会导入*单文件组件App.vue，
4、App.vue中会通过组件嵌套或者路由来引用components文件夹中的其他单文件组件。

菜鸟教程vue.js教程中的图：
Vue 的模块机制
　　Vue 是通过 webpack 实现的模块化，因此可以使用 import 来引入模块。

export 用来导出模块，Vue 的单文件组件通常需要导出一个对象，这个对象是 Vue 实例的选项对象，以便于在其它地方可以使用 import 引入。而 new Vue() 相当于一个构造函数，在入口文件 main.js 构造根组件的同时，如果根组件还包含其它子组件，那么 Vue 会通过引入的选项对象构造其对应的 Vue 实例，最终形成一棵组件树。

Vue实例是Vue应用的启动器，Vue组件是Vue实例的扩展。
项目只会创建一个Vue根实例，应用都是通过这个根实例启动的。

明白了这个关系，再来看看组件。

2、cli项目vue组件

组件分为局部组件和全局组件。（可以查看相关文章，不展开）
全局组件实现的方式，有一种是“单文件组件”。这里我们只看单文件组件。

单文件组件

1、定义一个后缀为.vue的文件，利用webpack编译处理。
2、单文件组件的最大优点是，可以将组件相关的HTML，CSS，JS都定义在.vue文件内，默认支持CSS模块化（样式仅在该组件内有效），JavaScript模块化（CommonJs模块）。
3、在项目中，我们写组件，用单文件组件模式。

单文件组件的格式：

<template>
  <!-- 该组件的模板结构（HTML） -->
</template>
<script>
  // 该组件的DOM操作
</script>
<style>
/*该组件的样式属性*/
  
</style>

注意，style 有scope属性后，能够将标签内部的CSS选择器自动加上后缀，使其仅应用在此组件内。

随着项目不断迭代，组件复杂度会随之增加，单文件组件有着更好的可读性和可扩展性，非常适合大中型项目。

三、问题解决方法

我们可以把教程中的例子，建立单文件组件，进行学习测试。

因为在main.js中有：
import App from ‘./App.vue’
所以，我们必须在当前组件中写入export default。

export default {
    name:'App',
    data(){
      return {
        //必须是一个函数，要有返回值，返回空对象也是有返回值
      }
    }
  }

Study.vue改写

<template>
  <div id="study">
    <h1>{{ msg }}</h1>
    <p v-if="seen">现在你看到我了</p>
    <template v-if="ok">
      <h1>菜鸟教程</h1>
      <p>学的不仅是技术，更是梦想！</p>
      <p>哈哈哈，打字辛苦啊！！！</p>
    </template>
  </div>
</template>
</div>
    
<script>
export default {
  data() {
    return {
      msg: "Welcome to Your Vue.js App .  HelloWorld",
      seen: true,
      ok: true
    };
  }
};
</script>

就可以显示内容了。

其它的学习测试例子，就可以按照此模式，练习了。

当然这里只是讲了个基本的，vue组件的内容还有很多需要学习理解。