目錄

?

?

過程

結(jié)果

---

?

過程

命令行工具CLI，可以快速搭建大型簡(jiǎn)單應(yīng)用

#全局安裝 vue-cli npm install --global vue-cli#創(chuàng)建一個(gè)局域 webpack 模板的新項(xiàng)目 vue init webpack my-project#安裝依賴 cd my-project npm run dev

這樣就可以了，

這里我使用WebStorm打開：

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

這里要注意下。

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

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>

?

結(jié)果

在Input中輸入后如下：

刪除一個(gè)：

?

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。