04 vue.js2.5——Vue-cli开发todolist

主要文件目录：

文件代码：

根实例，初始化vue：

// main.js
import Vue from 'vue'
import TodoList from './TodolList'  //引用第一个父组件
//import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',　　//根节点，挂载点
  //router,
  components: { TodoList },　　//组件
  template: ''　　　　//模板就是组件
})

 

 第一个.vue模板文件，是第一个父组件

 

 第二个.vue模板文件，是父组件下的一个子组件

 

页面输出：

 

 

 可以对照02慕课网《vue.js2.5入门》——Vue中的组件 的todolist实现