为了账号安全,请及时绑定邮箱和手机立即绑定
  • 小伙伴们,大家好,针对老师的视频教程,我整理了一份完整的源码,源码还有详细的注释和笔记,供大家学习时参考。

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


    查看全部
    15 采集 收起 来源:课程总结

    2019-01-31

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


    查看全部
  • 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 课程源码
    查看全部
    11 采集 收起 来源:课程总结

    2018-01-23

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

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


    查看全部
  • 踩坑记录(时间节点: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的前端工程。


    查看全部
    6 采集 收起 来源:课程介绍

    2018-10-21

  • 一、前端的价值:

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

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

    3、api定制。

    4、node.js层。

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


    查看全部
    4 采集 收起 来源:课程介绍

    2018-09-04

  • 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的前端工程。

    查看全部
    4 采集 收起 来源:课程介绍

    2018-04-21

  • 网络优化:

    • 减少http请求

    • 压缩静态资源文件

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

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

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


    查看全部
    3 采集 收起 来源:课程介绍

    2019-05-27

  • .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改变)。



    查看全部
首页上一页1234567下一页尾页

举报

0/150
提交
取消
课程须知
1、对es6语法有基本了解 2、了解前端工程化 3、了解vuejs
老师告诉你能学到什么?
1、通过webpack搭建vue工程workflow 2、哪些是学习vue的重点 3、.vue文件开发模式 4、vue使用jsx进行开发的方式 5、vue组件间通信的基本方式 6、webpack打包优化的基本点

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!