2020-11-01

大胜利！

经过10天睁眼闭眼就是读书的学习，基本上已经拿下vue的大半了，每天都有很多东西可以记录，但是奈何时间不够，写博客比较费时，所以打算一次性总结，主要以出现的问题为主，并加上我觉得比较重要的地方，知识方面肯定就不深入了，结构方面比较混乱，毕竟是自己的学习记录，（主要这个写博客的一些快捷键我不太会，我找个时间在word上写然后复制过来看看行不行，嘻嘻）

基础知识

这方面没啥好说的，网上资料一大堆，我就随便cv一点：

什么是Vue

什么是: 基于MVVM设计模式的渐进式的纯前端js框架
(1). MVVM?
(2). 渐进式: 不要求整个项目都用vue做，可以轻松和别的技术混搭，且会多少就可以先用多少！
(3). 纯前端js框架: 与nodejs无关！单靠浏览器就可运行！
(4). 框架:
a. 原生js: 不需要下载，浏览器就自带的ES+DOM+BOM
1). 优点: 万能！
2). 缺点: 繁琐！
b. jQuery函数库: 基于原生js，重新封装的一批函数的集合。简化了传统DOM每一步操作！
1). 优点: 简单！
2). 缺点: 没有简化开发的步骤！依然包含大量重复的编码！
c. 框架: 已经包含核心功能的半成品项目！
1). 优点: 根本上简化了开发流程，几乎避免了重复编码
2). 缺点: 需要转变观念，和做事方法！很难适应！
为什么: 便于大项目的开发，避免重复代码，提高开发效率
何时: 凡是以数据为主(增删改查)的项目，都可用vue开发！

差不多够了，在这里写一个我学到后面看到的一个问题，为什么vue能实时更新？
先偷张图：

具体可以自行百度，挺复杂的，我也就一知半解，变强壮就要知道各种行为背后的原理，知其然，知其所以然你才能更加得心应手，语法啥的没啥说的，说点不是vue的，学习过程中发现js的知识其实也非常重要，还有es6的相关知识，你会能大大提高你的代码效率，就随便说点，filter,reduce,map,箭头函数，闭包，let，对象，this指向谁，apply,apply还有两个一起的方法，名字忘了，都是能改变this的指向，挺好用的，析构函数，默认参数，学起来感觉和以前java挺像的，所以适应起来挺快，果然语言不说一通百通，至少思想差不多。
想到哪里写到哪里，具名插槽在不同的vue版本里面有不同的使用方式，一种是直接用，一种要写在template里，引入vue.js我没试过，但在脚手架3里确实要变，讲道理引入js的方法肯定也要变吧

axios

这个是用来网络请求的，但我写的项目是从接口直接获取数据的，而且我是照着写的直接封装了请求的js，没啥印象了- - 这一块这段时间在复习巩固一下，果然复习一遍学过的知识是非常有必要的！params传参和query传参这个有必要记录一下，一个和ajax的post，另一个和get差不多，就一个不显示等于后面的东西，一个显示，这一块和路由的知识有一点混在一起，比如动态路由，我也是似懂非懂，应该会用，但不太清楚具体实现，细节8到位。

webpack

这个就用来打包文件的，一般是脚手架里直接帮你配好的，但基础知识还是要学的，我经常遇到版本问题所以要降版本或者升级，还有一些地址的缩写，各种文件的配置，总是挺复杂的，个人觉得一些有印象就可以，到时候可以百度细节，但有那些东西是必须知道的，不然你搜都不会搜，这方面的基础知识我也要复习一下。

vue-cli

脚手架，这个更不多说，你用vue写项目肯定用这个，方便快捷好用，不可能自己一个个去配置，顺带提一句，用node.js进行包管理，虽然我npm熟练的一批，但是下一阶段我还是要学习node.js，234不同版本目录结构差很多，我印象不深了，但都是越来越精简，但有一点不好的是我刚开始用4创建的在写项目，写到事件总线注册vue的时候4他用不是new vue，我尝试修改不会改，百度也没啥结果，于是我降到了3 - -，之前用keep-alive保存的时候4的写法也不一样，我搞了很久才解决，所以4我觉得还是等一段时间，等我能百度到大部分问题的解决办法的时候再用（菜逼哭出声），不过我要是想变强，以后一定要成为写解决问题的那个人！

vue-router

路由这个，会看会写，有个懒加载，打包文件css，js文件啥的后问题关闭history，嵌套路由，keep-alive，导航守卫这一块我迷迷糊糊的，我也要去复习一下。想到了promise就说一下，这个我没咋用，但是这个知识点要知道，异步加载非常有用，复习。

vuex

给全局弄了个仓库，可以上传，修改，使用，且是同步修改，但用里面的data的时候最好通过mutations或者action或者getters，总之不要直接修改，不然vuetools不好监听，方便调试，还有映射，直接吧mutations，action某些你要用的写到组件里，这个感觉和mixin混入有点类似又有点区别，不好说，那在复习一下。。。用的时候最好把每个单独导出js，再import到store，方便管理。

项目

重头戏，我写的是手机淘宝那种样子的一个购物软件，照着写的，可能很多人照着写的第一个项目就是这个，我学下来反正感觉很棒,就放一张部署到nginx上以后的图
能滚能点，有商品详情有购物车，用的是better-scroll，这个组件用是好用，但是因为图片问题经常不能滚，所以图片load以后发射信息，要么$emit要么事件总线，在用滚动的地方refresh一下，懂自懂，不多说，大部分问题都是滚动高度因为图片问题太低了。写的时候基本上就封装封装封装，公共组件，业务组件，视图，视图组件，总之分的很细但又很有道理，然后就是请求数据，请求封装成js，然后展示到视图上，css规划下，细节很多，那些小功能，像下滑拉动，返回顶部，keep-alive exclude=“Detail”，详情，参数，评论这类的，总是想想不难写起来细节慢慢，而且之前的知识全部用到，总体来说痛并快乐着，每次修完一个bug或者写好一块东西那心情倍儿爽。这一块复习下逻辑和封装，感觉有很多能写，一想起来啥都不记得，感觉都会一点- -

（增加）弹窗组件：

import Toast from './Toast'
const obj = {}
obj.install = function (Vue){
    // console.log('111')
    const toastContrustor = Vue.extend(Toast)
    const toast = new toastContrustor()
    toast.$mount(document.createElement('div'))
    document.body.appendChild(toast.$el)
    Vue.prototype.$toast = toast
}
export default obj

结尾

直接就是打包放在服务器上运行，真实的项目流程就这样结束的。有啥想到的以后再来补充。
接下来任务依旧艰巨，es6,js,node.js，typescript,复习，微信小程序，还想写一个基于vue的音乐播放器，冲冲冲！