End Result Demo
Install Vue.js CLI
(https://vuejs.org/v2/guide/installation.html#CLI)
$ npm install --global vue-cli
Create new Vue.js Project, skipping defaults
$ vue init webpack todo-project
Run
npm install for node_module folders in the project if not done already
$ npm install
Open
index.html ; include bootstrap in markup
Open
HelloWorld.vue component
(dir: src/components/HelloWorld.vue)
- replace script with the following
- replace template for the component with the following
(notice
Vue binders syntax including
v-on:click - mapping to
add() method,
v-model, .
v-for utilized to display list of todo items)
Run
npm run dev to build the project locally on port http://localhost:8080
$ npm run dev
View end result demo in browser
see the code -
https://github.com/nickforce/VueJSTodoApp
