小伙伴们，大家好，针对老师的视频教程，我整理了一份完整的源码，源码还有详细的注释和笔记,供大家学习时参考。

GitHub下载地址：https://github.com/Jasonccj/vue-webpack-todo

2019.08.12

遇到的各种问题

1. webpack 4+ 需要独立安装webpack-cli    解决方法：控制台输入 npm install webpack-cli
   

2. vue-loader 15+ 需要在webpack.config.js里面添加

      const { VueLoaderPlugin } = require('vue-loader')

      ...

      ,
       plugins:[
           new VueLoaderPlugin()
       ]

3. 规则需要额外添加

      ,
               {
                   test:/.css$/,//正则表达式
                   loader:'css-loader'
               }

4. 模式

      "build": "webpack --config webpack.config.js  --mode production"
   

.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
    }
}

小伙伴们，大家好，针对老师的视频教程，我整理了一份完整的源码，源码还有详细的注释和笔记,供大家学习时参考。

GitHub下载地址：https://github.com/Jasonccj/vue-webpack-todo

2019年1月5号 课程：Vue+Webpack打造todo应用 2-1 跟着老师的步骤一步步配置webpack，结果一直报错。经过半个多小时的排查，发现版本的问题。webpack到4之后，以及vue-loader到15之后，需要配置VueLoaderPlugin，以及要重新配置css-loader，代码如下： const path = require('path') const VueLoaderPlugin = require('vue-loader/lib/plugin') module.exports = { entry: path.join(__dirname, 'src/index.js'), output: { filename: 'bundle.js', path: path.join(__dirname, 'dist') }, module: { rules: [ { test: /.vue$/, loader: 'vue-loader' }, { test: /.css$/, loader: 'css-loader' } ] }, plugins: [ new VueLoaderPlugin() ] }

https://github.com/chinadbo/vue-webpack-start 课程源码

踩坑记录（时间节点：2018-12-24）
1、warn提示需要安装css-loader依赖
2、webpack4版本需要安装webpack-cli，根据提示安装就行
3、在webpack.config.js中配置开发模式
4、缺少VueloDelpLuin，在vue官网照着加上https://vue-loader.vuejs.org/zh/migrating.html
5、安装vue-template-compiler
字符限制，教程详情+代码已上传欢迎下载学习
https://github.com/dcrysg/webpack4-vue-loader-tudo如果对您有帮助请给我一颗小星星

前端的价值：

1、搭建前端工程：数据缓存、es6和less（可以加快开发效率）。

2、网络优化：http(所有静态资源都是通过http请求的)。

3、api定制。

4、node.js层。

    vue-cli生成的项目就是基于webpack的前端工程。

一、前端的价值：

1、搭建前端工程：数据缓存、es6和less（可以加快开发效率）。

2、网络优化：http(所有静态资源都是通过http请求的)。

3、api定制。

4、node.js层。

二、vue-cli生成的项目就是基于webpack的前端工程。

html,body{
  margin 0
  padding 0
  width 100%
  height 100%
}
  body{
    background-image :url("../images/bg.jpg");
    background-size: cover;
    background-position :center;
    font:14px;
    color: #4d4d4d;
    font-weight :300;
  }

一、前端的价值：

1、搭建前端工程：数据缓存、es6和less（可以加快开发效率）。

2、网络优化：http(所有静态资源都是通过http请求的)。

3、api定制。

4、node.js层。

二、vue-cli生成的项目就是基于webpack的前端工程。

网络优化：

• 减少http请求

• 压缩静态资源文件

• 使用浏览器强缓存使浏览器的流量变更小、加载速度更快

重点难点不是业务开发、性能要求并不是很高，不会做在线ps一样的应用

最重要的是前端工程化的问题。

.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
        }
    }
}

写样式时，当加上lang="stylus"时，程序就报错了，一直提示可能缺少相应的loader什么的，识别不了#app，找了半天找不到原因，看了别人的配置，发现我多了一个$,配置styl文件的loader时，正则不能写成以.styl结尾的匹配方式，即最后不能加$，这可能是因为要解析vue文件中的样式的缘故吧，不仅仅是styl格式的文件

{

test:/\.styl/,

use:[

'style-loader',

'css-loader',

{

loader: 'postcss-loader',

options: {

sourceMap: true

}

},

'stylus-loader'

]

},

一、vue是一个组件化框架

二、react有jsx，html通过render方法动态生成，每次有数据变化，都会执行render方法，生成Html.

三、重点：数据绑定，vue文件开发方式，render

四、vue的api重点：

（1）生命周期方法（跟react学习的）

（2）computed，是一个reactive框架（声明好的数据，一旦改变，就会影响依赖这些数据的地方，如template依赖于data里的数据，data改变时，template改变）。