更改视图为Element风格

package.json

@@ -22,17 +22,20 @@
   },
   "homepage": "https://github.com/Eamonnzhang/TodoMVC-vue2.x#readme",
   "dependencies": {
+    "element-ui": "^1.0.5",
+    "perfect-scrollbar": "^0.6.15",
     "vue": "^2.1.4"
   },
   "devDependencies": {
     "babel-core": "^6.0.0",
     "babel-loader": "^6.0.0",
     "babel-preset-es2015": "^6.0.0",
     "cross-env": "^3.0.0",
-    "css-loader": "^0.25.0",
+    "css-loader": "^0.23.1",
     "file-loader": "^0.9.0",
     "node-sass": "^3.13.0",
     "sass-loader": "^4.0.2",
+    "style-loader": "^0.13.1",
     "vue-loader": "^10.0.0",
     "vue-template-compiler": "^2.1.0",
     "webpack": "^2.1.0-beta.25",

src/APP.vue

@@ -1,14 +1,18 @@
 <template>
      <div id="app">
-         <h2>{{msg}}</h2>
-        <my-input></my-input>
+        <el-card class="box-card">
+        <div slot="header" class="clearfix">
+            <div class="h1">{{msg}}</div>
+            <todo-input></todo-input>
+        </div>
         <todo-list :todos="todos" :filter="filter"></todo-list>
         <todo-footer></todo-footer>
+        </el-card>
      </div>
 </template>
 
 <script>    
-import MyInput from './components/Input.vue';
+import TodoInput from './components/Input.vue';
 import TodoList from './components/TodoList.vue';
 import TodoFooter from './components/TodoFooter.vue';
 import {eventHub} from './components/EventHub.js';
@@ -34,6 +38,11 @@ export default {
     },
     methods : {
         addTodo(newTodo){
+            if(!newTodo){
+                console.log(this.$refs);
+                this.$refs.todoInput.click()
+                return;
+            }
             this.todos.push({value:newTodo,completed:false})
             Storage.store(this.todos)
         },
@@ -43,13 +52,27 @@ export default {
         }
     },
     components :{
-        MyInput,
+        TodoInput,
         TodoList,
         TodoFooter
     }
 }
 </script>
 
 <style lang="sass"> 
-
+    body{
+        background-color: #F9FAFC;
+    }
+    #app{
+        width: 560px;
+        margin: 0 auto;
+        font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
+    }
+    .h1{
+        color: #5e6d82;
+        font-size : 20px;
+        text-align : center;
+        padding: 20px 0;
+    }
+   
 </style>

src/components/Input.vue

@@ -1,15 +1,21 @@
 <template>
     <div class="km-input-wrap">
-        <input @keyup.enter="addNewTodo" placeholder="add new todo" v-model='todoItem'>
+        <el-input
+            class="inline-input" 
+            size="large"
+            placeholder="What needs to be done?"
+            @keyup.enter.native="addNewTodo" 
+            ref="todoInput"
+            v-model.trim='todoItem'>
+        </el-input>
     </div>
 </template>
 
 <script>
 import TodoList from './TodoList.vue';
-import Vue from 'vue';
 import {eventHub} from './EventHub.js';
 export default {
-    name : 'my-input',
+    name : 'todo-input',
     data(){
         return {
             todoItem:''

src/components/TodoFooter.Vue

@@ -1,8 +1,8 @@
 <template>
     <div class="footer">
-        <button @click="setFilter('all')">All</button>
-        <button @click="setFilter('active')">Active</button>
-        <button @click="setFilter('completed')">Completed</button>
+        <el-button @click="setFilter('all')">All</el-button>
+        <el-button @click="setFilter('active')">Active</el-button>
+        <el-button @click="setFilter('completed')">Completed</el-button>
     </div>
 </template>
 <script>
@@ -20,4 +20,8 @@
     ul li{
         list-style-type: none
     }
+    .footer{
+        border-top:1px solid #eee;
+        padding-top: 10px;
+    }
 </style>

src/components/TodoItem.vue

@@ -0,0 +1,60 @@
+<template>
+    <li :class="{complete:todo.completed}" @click="">
+        <el-checkbox v-model="todo.completed"></el-checkbox>
+        <span>{{todo.value}}</span>
+        <i class="el-icon-close" @click="removeTodo(index)"></i>
+    </li>   
+</template>
+ <script>
+    export default {
+        name : 'todo-item',
+        props:['todo','todos','index'],
+        methods : {
+            removeTodo(index){
+                this.todos.splice(index,1)
+            }
+        }
+    }
+ </script>
+
+ <style lang="sass" scoped>
+    span{
+        font-size: 22px;
+        line-height: 22px;
+    }
+    i{
+        float: right;
+        margin-right: 15px;
+        line-height: 22px;
+        font-size: 12px;
+        color: #F7BA2A;
+    }
+    span{
+        margin-left: 10px;
+        width: 100%;
+    }
+    li.complete{
+        span{
+            text-decoration: line-through;
+            color:#ddd;
+        }
+    }
+     li{
+        padding-bottom: 10px;
+        border-bottom: 1px solid #eee;
+        margin-bottom: 10px;
+        cursor: pointer;
+     }
+     i{
+         display: none;
+         opacity: 0.5;
+     }
+     i:hover{
+         opacity: 1;
+     }
+    
+     li:hover i{
+         display: block;
+     }
+
+ </style>

src/components/TodoList.vue

@@ -1,16 +1,12 @@
 <template>
     <div class="km-todolist">
-        <ol>
-            <li v-for="(item,index) in filterTodos" :class="{complete:item.completed}">
-                <span>{{item.value}}</span>
-                <button @click="removeTodo(index)">删除</button>
-                <button @click="toggleTodo(item)" :class="{complete:item.completed}">完成</button>
-            </li>        
-        </ol>
+        <ul id="todoList">
+            <todo-item v-for="(todo,index) in filterTodos" :todos="todos" :todo="todo" :index="index"></todo-item>
+        </ul>
     </div>
 </template>
-
 <script>
+    import TodoItem from './TodoItem.vue'
     let filter = {
         all:function(todos){
             return todos;
@@ -29,29 +25,22 @@
     export default {
         name : 'todo-list',
         props : ['todos','filter'],
-        methods : {
-            removeTodo(index){
-                this.todos.splice(index,1)
-            },
-            toggleTodo(item){
-                item.completed = !item.completed
-            }
-        },
         computed : {
             filterTodos(){
                 return filter[this.filter](this.todos)
             }
-        }
+        },
+        components : {
+            TodoItem
+        },
     }
 </script>
 
 <style lang="sass">
-    li.complete{
-        span{
-            text-decoration: line-through;
-        }
-    }
-    button.complete{
-        background-color: #fff;
+   
+    #todoList{
+        height: 450px;
+        position: relative;
+        padding: 0 20px 0 5px;
     }
 </style>

src/main.js

@@ -1,7 +1,13 @@
 import Vue from 'vue'
+import Ps from 'perfect-scrollbar'
+import ElementUI from 'element-ui'
+import 'perfect-scrollbar/dist/css/perfect-scrollbar.min.css'
+import 'element-ui/lib/theme-default/index.css'
 import App from './App.vue'
-
+Vue.use(ElementUI)
 new Vue({
     el : '#app',
     render : h => h(App)
-})
+})
+let todoList = document.getElementById('todoList');
+Ps.initialize(todoList);

webpack.config.js

@@ -14,9 +14,17 @@ module.exports = {
                 test : /\.vue$/,
                 loader : 'vue-loader',
                 options : {
-                     scss: 'style!css!sass'
+
                 }
             },
+            {
+                test: /\.css$/,
+                loader: 'style-loader!css-loader'
+            },
+            {
+                test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
+                loader: 'file-loader'
+            },
             {
                 test : /\.js$/,
                 loader : 'babel-loader',