vue+webpack打造todo基础应用

福尔摩斯对我笑 2019-05-26 6525 次 1775条

项目地址预览和源码

前端的价值

  • 搭建前端工程化
  • 网络优化
  • API定制
  • nodejs层

注意点

  • 在命令行中直接使用某个模块的cli模式运行,调用的是该模块全局的版本,所以,一般从package.json文件中启动
  • 新版vue-loader需要安装 VueLoaderPlugin 插件,可查看官网

GIT 提交历史-对应信息

webpack配置项目加载各种静态自由及css预处理器

  • loader的处理方式是逐级往上处理,比如:stylus loader 将styl文件转成css-》再通过 css loader|style-loader去处理

webpack-dev-service 的配置和使用

  • 无需建立html文件,可直接通过html-webpack-plugin' 简化html的创建
  • 增加虚拟服务打开html
  • 增加热更新

VUE2的核心技术知识介绍

  • template本质还是render方法

配置vue的jsx写法以及postcss

实现todo的界面

  • 安装Babel-loader时提示 ENOENT: no such file or directory, rename 'F:\webpack打z造todo\node_modules.staging\is-extendable-e20dea61\README.md'

解决方案: 删除package-lock.json文件,重新安装

  • babel-loader

loader 让 webpack 能够去处理那些非 JavaScript 文件(webpack 自身只理解
JavaScript)。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块,然后你就可以利用 webpack的打包能力,对它们进行处理。

  • babel-loader

babel-core的作用在于提供一系列api。这便是说,当webpack使用babel-loader处理文件时,babel-loader实际上调用了babel-core的api,因此也必须安装babel-core:

  • babel-preset-env

babel-preset-env的作用是告诉babel使用哪种转码规则进行文件处理

  • 解析jsx文件还需要安装下面的依赖

//npm i babel-preset-env@1.6.1 babel-plugin-transform-vue-jsx@3.5.0
//npm i babel-helper-vue-jsx-merge-props@^2.0.0 babel-plugin-syntax-jsx@^6.8.0

实现业务逻辑

  • findIndex 返回传入一个测试条件或函数中符合条件的数组的第一个元素位置,很类似some

webpack配置css单独分离打包

  • 安装 extract-text-webpack-plugin 该插件的主要是为了抽离css样式,防止将样式打包在js中引起页面样式加载错乱的现象 https://www.npmjs.com/package/extract-text-webpack-plugin
  • 执行后报错: DeprecationWarning: Tapable.plugin is deprecated. Use new API on .hooks instead

    问题原因: extract-text-webpack-plugin目前版本不支持webpack4。
    解决方案: 使用extract-text-webpack-plugin的最新的beta版 npm install extract-text-webpack-plugin@next

  • 打包时报错: Path variable [contentHash:8] not implemented in this context: styles.[contentHash:8].css

    解决方案: 不使用cotentHash,改为chunkHash

webpack区分打包类库代码及hash优化- [利用浏览器的缓存机制,减少服务器压力,合理使用缓存]

  • 使用new webpack.optimize.CommonsChunkPlugin时报错:Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.

    解决方案:

      config.optimization = {
        splitChunks: {
          cacheGroups: {
              commons: {
                  name: "vendor",
                  chunks: "initial",
                  minChunks: 2
              }
          }
        }
      }
    
  • hash和chunkhash和contenthash的区别

    hash: hash是跟整个项目的构建相关,构建生成的文件hash值都是一样的,所以hash计算是跟整个项目的构建相关,同一次构建过程中生成的hash都是一样的,只要项目里有文件更改,整个项目构建的hash值都会更改。
    如果出口是hash,那么一旦针对项目中任何一个文件的修改,都会构建整个项目,重新获取hash值,缓存的目的将失效

    chunkhash: 采用hash计算的话,每一次构建后生成的hash值都不一样,即使文件内容压根没有改变。这样子是没办法实现缓存效果,我们需要另一种hash值计算方法,即chunkhash。
    chunkhash和hash不一样,它根据不同的入口文件(Entry)进行依赖文件解析、构建对应的chunk,生成对应的hash值。我们在生产环境里把一些公共库和程序入口文件区分开,单独打包构建,接着我们采用chunkhash的方式生成hash值,那么只要我们不改动公共库的代码,就可以保证其hash值不会受影响。
    由于采用chunkhash,所以项目主入口文件main.js及其对应的依赖文件main.css由于被打包在同一个模块,所以共用相同的chunkhash,但是公共库由于是不同的模块,所以有单独的chunkhash。这样子就保证了在线上构建时只要文件内容没有更改就不会重复构建。

    contenthash: contenthash表示由文件内容产生的hash值,内容不同产生的contenthash值也不一样。在项目中,通常做法是把项目中css都抽离出对应的css文件来加以引用。

课程寄语

  • 学习VUE重点不是API和指令,而是过程
  • 眼界放宽,有点耐心,学习过程中确实会有很多报错,一大半的报错是因为版本不同的原因,所以一定要多点耐心,多看看文档
标签: /

非特殊说明,本博所有文章均为博主原创。

头像也是LOGO
未来博客 博主大人
到了这个年纪,不应该再彷徨!

发表评论



 


已有 1775 条评论 1


  1. http://www.kristin-von-maessenhausen.de/guestbox/guestbox.php?Anfangsposition=0&admin_login

    Terrific web page you have in this article, i do agree on some matters although, but not all.

    回复 2020年2月26日
  2. jasa pengurusan siujk

    When I originally left a comment I appear to have clicked on the -Notify me when new comments are added- checkbox and now every time a comment is added I receive 4 emails with the exact same comment. Is there a way you are able to remove me from that service? Cheers!

    回复 2020年2月26日
  3. anal

    Oh my goodness! Amazing article dude! Thank you so much, However I am going through difficulties with your RSS. I don’t know why I can’t subscribe to it. Is there anybody else having identical RSS problems? Anyone who knows the solution can you kindly respond? Thanks!!

    回复 2020年2月26日
  4. god damn

    I used to be able to find good information from your blog articles.

    回复 2020年2月26日
  5. tits

    I used to be able to find good advice from your blog articles.

    回复 2020年2月26日
  6. hard core

    Your style is very unique compared to other folks I have read stuff from. Many thanks for posting when you have the opportunity, Guess I’ll just bookmark this page.

    回复 2020年2月26日
  7. pulseras budistas de piedras

    I used to be suggested this blog by way of my cousin. I’m now not certain whether this put up is written through him as nobody else understand such exact approximately my problem. You are wonderful! Thanks!

    回复 2020年2月26日
  8. cocksuck

    Good site you have got here.. It’s hard to find quality writing like yours these days. I truly appreciate people like you! Take care!!

    回复 2020年2月26日
  9. Electric Mountain Bikes

    Thank you for the sensible critique. Me and my neighbor were just preparing to do some research about this. We got a grab a book from our area library but I think I learned more from this post. I’m very glad to see such fantastic info being shared freely out there.

    回复 2020年2月26日
  10. lesbians

    I love it when people get together and share opinions. Great site, stick with it!

    回复 2020年2月26日
  11. Reddit soccer streams

    Some truly superb articles on this web site, regards for contribution. “Such evil deeds could religion prompt.” by Lucretius.

    回复 2020年2月26日
  12. fuck

    You ought to take part in a contest for one of the finest blogs on the web. I will highly recommend this website!

    回复 2020年2月26日
  13. 부산 출장업소《카톡- Po 3 4》《Poo3 4.c0M》출장샵예약출장최강미녀Y╉◘2019-03-07-16-01부산╂AIJ☽출장안마콜걸강추출장색시미녀언니☃출장소이스홍성◦오피걸⇈부산

    I blog frequently and I truly appreciate your information. Your article has truly peaked my interest. I will take a note of your blog and keep checking for new information about once per week. I opted in for your Feed as well.

    回复 2020年2月26日
  14. negro

    I couldn’t resist commenting. Perfectly written!

    回复 2020年2月26日
  15. intime replica watches

    Appreciating the hard work you put into your site and detailed information you provide.
    It’s good to come across a blog every once in a while that isn’t
    the same unwanted rehashed material. Fantastic read! I’ve saved your site and I’m adding your
    RSS feeds to my Google account.

    回复 2020年2月26日
  16. 경상북도출장가격(카톡: Mo46)〖m oo27.c0M〗출장소이스출장여대생Y▦◕2019-02-20-05-59경상북도↟AIJ▌콜걸후기출장샵콜걸출장만족보장⇄역출장안마⇩콜걸업소◈경상북도

    Aw, this was a really nice post. Spending some time and actual effort to make a good article… but what can I say… I put things off a whole lot and don’t manage to get anything done.

    回复 2020年2月26日
  17. 월드 카지노

    I’m not sure exactly why but this web site is loading extremely slow for
    me. Is anyone else having this problem or is it a problem on my end?
    I’ll check back later and see if the problem still exists.

    回复 2020年2月26日
  18. 에그 벳

    It’s going to be end of mine day, but before end I am reading this wonderful paragraph to increase my know-how.

    回复 2020年2月26日
  19. 007 카지노

    I was wondering if you ever considered changing the layout of your blog?
    Its very well written; I love what youve got to say.
    But maybe you could a little more in the way of content so people
    could connect with it better. Youve got an awful lot of text
    for only having 1 or 2 pictures. Maybe you could space it out
    better?

    回复 2020年2月26日
  20. 샌즈 카지노

    Hiya! Quick question that’s completely off topic. Do you know
    how to make your site mobile friendly? My site looks weird when browsing from my iphone.
    I’m trying to find a theme or plugin that might be able to fix this issue.
    If you have any recommendations, please share.

    With thanks!

    回复 2020年2月26日
  21. 블랙 잭

    I was able to find good advice from your articles.

    回复 2020年2月26日
  22. erotic

    Pretty! This was an extremely wonderful post. Thank you for providing these details.

    回复 2020年2月26日
  23. cerdar49815.design.blog

    Unquestionably consider that that you said. Your favorite justification appeared to be at the web the simplest factor to consider of.
    I say to you, I definitely get annoyed at the same time as folks think about concerns
    that they plainly don’t recognize about.
    You managed to hit the nail upon the top and outlined out the entire
    thing with no need side-effects , other people could take a signal.
    Will likely be again to get more. Thank you

    回复 2020年2月26日
  24. best surrogacy treatment centres in kolkata

    What’s up to all, how is the whole thing, I think every one
    is getting more from this website, and your views are pleasant for new users.

    回复 2020年2月26日
  25. surrogacy in Kanpur

    Appreciating the hard work you put into your blog and detailed
    information you provide. It’s nice to come across a blog every once in a
    while that isn’t the same outdated rehashed material.
    Great read! I’ve saved your site and I’m adding your RSS feeds to my Google account.

    回复 2020年2月26日
  26. homoerotic

    Pretty! This was an incredibly wonderful article. Thanks for supplying these details.

    回复 2020年2月26日
  27. costas family fun park

    For hottest news you have to pay a quick visit world wide web and on internet
    I found this web site as a most excellent web site for most up-to-date updates.

    回复 2020年2月26日
  28. wealsel.design.blog

    An intriguing discussion is worth comment. I
    believe that you ought to publish more on this topic, it may not be a taboo subject
    but usually people don’t speak about such issues.
    To the next! All the best!!

    回复 2020年2月26日
  29. xxx Free Porn movies

    What a material of un-ambiguity and preserveness of precious knowledge about unexpected emotions.

    回复 2020年2月26日
  30. 인터넷 바카라

    My spouse and I absolutely love your blog and find most of your post’s
    to be just what I’m looking for. can you offer guest writers
    to write content available for you? I wouldn’t mind composing a post or elaborating on a lot of the subjects you write in relation to here.
    Again, awesome blog!

    回复 2020年2月26日
  31. lexus888 versi Mobile

    I’m not sure exactly why but this weblog is loading incredibly slow
    for me. Is anyone else having this issue or is it a
    issue on my end? I’ll check back later and see if the problem still exists.

    回复 2020年2月25日
  32. porno

    Way cool! Some very valid points! I appreciate you penning this write-up plus the rest of the website is also really good.

    回复 2020年2月25日
  33. assshole

    I was able to find good information from your articles.

    回复 2020年2月25日
  34. 청주안마《카톡: Mo46》m oo27.c0M흥출장안마출장여대생Y→♠2019-02-27-04-36청주☀AIJ➺출장연애인급콜걸출장마사지안마♣출장샵예약﹌콜걸업소♬청주

    Aw, this was an extremely nice post. Spending some time and actual effort to produce a really good article… but what can I say… I hesitate a lot and don’t manage to get nearly anything done.

    回复 2020年2月25日
  35. 수원출장오피카톡- Po 3 4Poo3 4.c0M안마출장안마추천Y⇚♐2019-04-10-19-36 수원┎AIJ⇩출장맛사지출장연애인급출장샵후기╂출장안마♦출장소이스홍성┩ 수원

    I’m amazed, I have to admit. Seldom do I encounter a blog that’s both equally educative and interesting, and let me tell you, you’ve hit the nail on the head. The issue is something that not enough folks are speaking intelligently about. Now i’m very happy I found this in my search for something relating to this.

    回复 2020年2月25日
  36. http://pestexterminators.info/category/eastside-pest-control/

    What’s up mates, its fantastic paragraph concerning tutoringand entirely explained, keep
    it up all the time.

    回复 2020年2月25日
  37. douche

    Pretty! This was an extremely wonderful article. Thanks for supplying this information.

    回复 2020年2月25日
  38. modern arab contracting & trading company ltd

    Excellent blog! Do you have any recommendations for aspiring writers? I’m hoping to start my own blog soon but I’m a little lost on everything. Would you advise starting with a free platform like WordPress or go for a paid option? There are so many options out there that I’m completely confused .. Any suggestions? Kudos!

    回复 2020年2月25日
  39. 3m dust masks

    This site certainly has all the information and facts I wanted
    concerning this subject and didn’t know who to ask.

    回复 2020年2月25日
  40. fuck you

    Having read this I believed it was really informative. I appreciate you finding the time and effort to put this content together. I once again find myself personally spending a lot of time both reading and commenting. But so what, it was still worth it!

    回复 2020年2月25日
  41. lexus888 mobile version

    Heya! I just wanted to ask if you ever have any trouble with hackers?
    My last blog (wordpress) was hacked and I ended up losing many months
    of hard work due to no back up. Do you have any methods to prevent hackers?

    回复 2020年2月25日
  42. 더킹 카지노

    Keep this going please, great job!

    回复 2020年2月25日
  43. caesarpetty.wordpress.com

    Fastidious answer back in return of this issue with genuine arguments
    and explaining all concerning that.

    回复 2020年2月25日
  44. Bộ phát wifi

    Nhà phân phối các sản phẩm: PCMAX Máy trợ giảng, Máy lọc không khí,
    Bộ chia tín hiệu HDMI, Cáp HDMI, Ổ điện âm tường, âm sàn, HDMI không dây, Bộ chia HDMI, Bộ gộp HDMI, Bộ ghép màn hình

    回复 2020年2月25日
  45. 《대전출장샵》ღ출장부르는법❉토요 경마μ〈카톡: hwp63〉┒(qьx488.сом)[]❀대전광주 대딸방콜걸샵[][]╓토요 경마l3c2019-03-19-16-27국노대전[]w대전[]卐xvU주안 여관

    Great web site you have got here.. It’s hard to find high quality writing like yours these days. I honestly appreciate individuals like you! Take care!!

    回复 2020年2月25日
  46. source

    Excellent blog you have got here.. It’s hard to find high-quality writing like yours nowadays. I honestly appreciate individuals like you! Take care!!

    回复 2020年2月25日