使用vue 2创建todolist

1. 创建项目目录

   $ mkdir vue2-todolist
   $ cd vue2-todolist

2. 使用 vue-cli 工具初始化项目.

   $ vue init webpack .
   
   ? Generate project in current directory? Yes
     This will install Vue 2.x version of the template.
   
     For Vue 1.x use: vue init webpack#1.0
   
   ? Project name vue2-todolist
   ? Project description This a vue2 todolist.
   ? Author itaken <regelhh@gmail.com>
   ? Vue build standalone
   ? Install vue-router? Yes
   ? Use ESLint to lint your code? No
   ? Setup unit tests with Karma + Mocha? No
   ? Setup e2e tests with Nightwatch? No
   
      vue-cli · Generated "vue2-todolist".
   
      To get started:
   
        npm install
        npm run dev
   
      Documentation can be found at https://vuejs-templates.github.io/webpack

   说明: 本项目可以不使用vue-router

3. 运行项目

   $ sudo cnpm install
   $ sudo npm run dev

4. 完善项目

   • 安装 sass插件, 支持 scss ^1 ^2

     $ sudo cnpm install node-sass --save-dev
     $ sudo cnpm install sass-loader --save-dev

   • 引入localstorage 本地存储.

     // 引入 本地存储方法
     import "./assets/js/store.modern.min.js";
     import Vue from 'vue'
     Vue.use(store);

   • 监控TODO items变化,并存储

     watch:{
       items:{
           handler: function(items){
               Storage.save(items);
           },
           deep: true
       }
     }

5. 效果如下

   

项目源码: vue2-todolist

---

参考文档

• vue.js入门基础
• 通过todoMVC来学vue.js的使用
• PURE css
• How to use “scss” in *.vue?
• Advanced Loader Configuration
• 如何写一手漂亮的 Vue