目錄

?

?

過程

結果

---

?

過程

命令行工具CLI，可以快速搭建大型簡單應用

#全局安裝 vue-cli npm install --global vue-cli#創建一個局域 webpack 模板的新項目 vue init webpack my-project#安裝依賴 cd my-project npm run dev

這樣就可以了，

這里我使用WebStorm打開：

并且修改了components中的vue和src下的vue，

這里要注意下。

其實這里面一開始的頁面是index.html，然后就加載了src下的main.js，這里修改main.js下的導入，即可

main.js

// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import TodoList from './TodoList'Vue.config.productionTip = false/* eslint-disable no-new */ new Vue({el: '#app',components: { TodoList },template: '<TodoList/>' })

TodoList.vue

<template><div><div><input v-model="inputValue"/><button @click="handleSubmit">提交</button></div><ul><todo-itemv-for="(item, index) of list":key="index":content="item":index="index"@delete="handleDelete"></todo-item></ul></div> </template><script>import TodoItem from './components/TodoItem' export default {components:{'todo-item': TodoItem},data(){return{inputValue: '',list: []}},methods: {handleSubmit(){// alert(123)this.list.push(this.inputValue)},handleDelete(index){this.list.splice(index, 1)}} } </script><style></style>

TodoItem.vue

<template><li @click="handleDelete" class="item">{{content}}</li> </template><script> export default {props: ['content', 'index'],methods: {handleDelete(){this.$emit('delete', this.index)}} } </script><style scoped>.item{color: green;} </style>

?

結果

在Input中輸入后如下：

刪除一個：

?

總結

以上是生活随笔為你收集整理的前端笔记-使用vue-cli（脚手架）开发TodoList的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。