// 全局安装 vue-cli
npm install -g vue-cli

npm run dev

开发环境下，没有找到生成的 app.js 文件
npm run build 就会生成编译后的文件

new Vue({
  el: '#app',
  router,
  template: '<App></App>',
  components: { App }
})

template 和 components 是什么关系呀，这会还没弄明白

Vue.js——60分钟组件快速入门（上篇）
Vue.js——60分钟组件快速入门（下篇）

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。

先注册组件，再初始化实例

• 全局注册组件
  组件在注册之后，便可以作为自定义元素 <my-component></my-component> 在一个实例的模板中使用。注意确保在初始化根实例之前注册组件

Vue.component(tagName, options)
new Vue({
  el: '#element'
})

样例
Vue.component('my-component', {
  template: '<p>Hello, Vue.js</p>'
})

new Vue({
  'el': '#app'
})

• 局部注册组件
  通过某个 Vue 实例/组件的实例选项 components 注册仅在其作用域中可用的组件：

var Child = {
  template: '<div>A custom component</div>'
}

new Vue({
  'el': '#app',
  components: {
    'my-component': Child
  }
})

<tempalte></template> 模板文件中的 html 内容需要包含在一个标签里面

src/router/index.js

import HelloWorld from '@/components/HelloWord'

在 build/webpack.base.conf.js 文件中

  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },

定义了 @ 符号的别名

Template

The template property is where you define component HTML templates. It can be a custom component that we will create ourselves as seen in the example above or it can be traditional HTML:

Components

Components are the building blocks for Vue.
Components are characterized with template and logic with data flowing from the logic to the template and events emitted from the template to the logic.

• Vue Instance ----DATA----> Template
• Template ----EVENT-----> Vue Instance

Template Syntax

Views are represented by HTML templates but with extra utility features like interpolation ({{ }}) and directives (v-on:click) to help display the models' data.

new Vue({
  template: `<div>{{ text }}</div>`,
  data() {
    return {
      'text': 'Hello, Vue'
    }
  }
}).$mount('#app')

The template (view) and data (model) are split into different entities but bound together using the object properties. Let's explain some binding concept: