新建文件夹，执行npm init，配置项可以都选默认，最后会生成一个package.json文件。接下来安装我们所需要的包。

因为是训练项目，就没有区分devdependens和dependence，都安装到一起了

npm i webpack vue vue-loader

发出警告

peerDependencies WARNING vue-loader@* requires a peer of css-loader@* but none was installed

peerDependencies WARNING vue-loader@* requires a peer of vue-template-compiler@^2.0.0 but none was installed

说 vue-loader依赖css-loader和vue-template-compiler，然后继续安装这两个

npm i css-loader vue-template-compiler

项目就初始化好了

新建src作为源码放置目录

src中新建app.vue文件

在根目录下新建webpack.config.js，webpack是用来帮我们打包前端的资源的，前端资源包括css、js、图片等，这些都需要通过http加载

以js文件作为入口加载资源

在src中新建index.js作为入口文件

.vue是组件，不能直接挂载到html中去

webpack做的事情就是把不同的静态资源的类型打包成一个js，然后再在html里引用这个js

vue-cli生成的项目是基于webpack的工程

前端上线网络优化：减少http请求、压缩静态资源文件、利用浏览器长缓存使应用流量变得更小加载速度变得更快

http理解、加快http请求速度，缓存http请求

jsx语法

jsx的export default里，

data()下的return跟的是花括号，

render()下的return跟的是圆括号。

哦，真的是要被自己蠢哭了。

stylus-loader依赖于stylus

{
    test: /\.styl/,
    use: ['style-loader','css-loader','stylus-loader']
 }

每个loader只处理自己关心的部分。

stylus-loader处理完stylus部分后，丢给css-loader。

url-loader依赖file-loader

编译失败的原因，需要npm对应的版本号

npm i webpack@3.10.0 vue@2.5.13 vue-loader@13.6.0 css-loader@0.28.7 vue-template-compiler@2.5.13

props:{
    todos:{
        type: Array,
        required: true,
    }
},
computed:{
    unFinishedTodoLength(){
        return this.todos.filter(todo => !todo.completed).length
    }
}

1、computed 每次数据变化时，自动计算；

2、方法命名越详细越好；

this.todos.splice(this.todos.findIndex( todo => todo.id === id),1)

常见的函数式写法

filter是从props里传入的，在script部分props里需要申明filter的类型。 

props:{    
    filter:{        
        type:String,        
        required:true    
    }
}

眼界决定高度~

.helper {
    font-weight 100
    display flex
    justify-content space-between
    padding 5px 0
    line-height 30px
    background-color #fff
    font-size 14px
    font-smoothing antialiased
}
.left,.clear,.tabs {
    padding 0 10px
    box-sizing border-box
}
.left,.clear {
    width 150px
}
.left {
    text-align left
}
.clear {
    text-align right
    cursor pointer
}
.tabs {
    width 200px
    display flex
    justify-content space-around
    * {
        display inline-block
        padding 0 10px
        cursor pointer
        border 1px solid rgba(175,47,47,0)
        &.active {
            border-color rgba(175,47,47,0.4)
            border-radius 5px
        }
    }
}

.todo-item {
    position relative
    background-color #fff
    font-size 24px
    border-bottom qpx solid rgba(0,0,0,0.06)
    &:hover {
        .destroy:after {
            content: 'x'
        }
    }
    label {
        white-space pre-line
        word-break break-all
        padding 15px 60px 15px 15px
        margin-left 45px
        display block
        line-height 1.2
        transition color 0.4s
    }
    &.completed {
        label {
            color #d9d9d9
            text-decoration line-through
        }
    }
    .toggle {
        text-align center
        width 40px
        height 40px
        position absolute
        top 0
        bottom 0
        margin auto 0
        border none
        appearance none
        outline none
        &:after {
            content url("../assets/images/round.svg")
        }
        &:checked:after {
            content url("../assets/images/done.svg")
        }
    }
    .destroy {
        position absolute
        top 0
        right 10px
        bottom 0
        width 40px
        height 40px
        margin auto 0
        font-size 30px
        color #cc9a9a
        margin-bottom 11px
        transition color 0.2s ease-out
        background-color transparent
        appearance none
        border-width 0
        cursor pointer
        outline none
    }
}