vue学习进阶：组件入门练习到使用vue-cli开发

新建index.html，直接复制以下代码，双击浏览器运行即可。代码包含Vue的组件使用，可对照练习。

    
    
    

    
    




    
todoList
    
    提交
    

        
{{item}}
    

    
全局组件 todo-item
    

        
    

    
全局组件
    

    
局部组件
    

使用vue-cli开发，首先确保电脑上安装了node和npm

#全局安装 vue-cli

npm install --global vue-cli

#创建一个基于webpack 模板的新项目

vue init webpack your-project-name

cd your-project-name

npm run dev

文件结构

重复实现上述代码的功能,可以比较语法上的差异。

修改main.js

import Vue from 'vue'
import todoList from './todoList'

Vue.config.productionTip = false

new Vue({
  el: '#app',
  components: { todoList },
  template: ''
})

在src文件夹下新建文件todoList.vue

在src/components文件夹下新建文件itemList.vue