文末
技术是没有终点的,也是学不完的,最重要的是活着、不秃。
零基础入门的时候看书还是看视频,我觉得成年人,何必做选择题呢,两个都要。喜欢看书就看书,喜欢看视频就看视频。
最重要的是在自学的过程中,一定不要眼高手低,要实战,把学到的技术投入到项目当中,解决问题,之后进一步锤炼自己的技术。
自学最怕的就是缺乏自驱力,一定要自律,杜绝“三天打鱼两天晒网”,到最后白忙活一场。
高度自律的同时,要保持耐心,不抛弃不放弃,切勿自怨自艾,每天给自己一点点鼓励,学习的劲头就会很足,不容易犯困。
技术学到手后,找工作的时候一定要好好准备一份简历,不要无头苍蝇一样去海投简历,容易“竹篮打水一场空”。好好的准备一下简历,毕竟是找工作的敲门砖。
拿到面试邀请后,在面试的过程中一定要大大方方,尽力把自己学到的知识舒适地表达出来,不要因为是自学就不够自信,给面试官一个好的印象,面试成功的几率就会大很多,加油吧,骚年!
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
1. 使用第三方插件
https://github.com/vuejs/awesome-vue#components–libraries
集合了来自社区贡献的数以千计的插件和库。
2. 使用第三方UI框架
1.饿了么UED团队推出的vue 前端框架
(1) PC框架:(element UI)
https://github.com/ElemeFE/element
- 从0开始的话,可以通过以下命令
- 项目已经写了, 通过 cnpm i --save element-ui
(2) 移动端框架:(mint UI) 好久不更新维护了
https://mint-ui.github.io/docs/#/
https://github.com/ElemeFE/mint-ui
2. 有赞技术团队推出的vue移动端框架
移动端框架:(vant)
https://youzan.github.io/vant/#/zh-CN/
(1) 安装
(2) 正在加载
(3)无限滚动
(4) IndexBar 索引栏
三. 项目实战
1. betterScroll
主要完成的功能需要包含Better-Scroll实现页面中拖动滚动、拉
动属性等功能
https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/
(1) 初始化
//html
<div class="kerwin" >
<ul >
<li v-for="item in datalist">{{item}}</li>
</ul>
<div class="loading-wrapper"></div>
</div>
//js
import BScroll from 'better-scroll'
this.$nextTick(()=>{
var myscroll = new BScroll('.kerwin',
{
pullDownRefresh: {
threshold: 50,
stop: 20
},
scrollbar: {
fade: true,
interactive: false // 1.8.0 新增
},
pullUpLoad: {
threshold: 50
}
})
})
//css
.kerwin{
height: 300px; //设置高度
overflow:hidden; //溢出隐藏
position: relative; //修正滚动条位置
}
(2) 下拉刷新
myscroll.on('pullingDown',()=>{
console.log("下拉了")
setTimeout(() => {
myscroll.finishPullDown() // 自动调用 .refresh()
}, 1000)
})
(3) 上拉加载
myscroll.on('pullingUp',()=>{
console.log("到底了")
setTimeout(() => {
myscroll.finishPullUp() // 自动调用 .refresh()
}, 1000)
})
2. 移动端事件相关
(1)click事件300ms延迟
解决:
- 设置meta viewport
- fastclick
(2)Hammer.js
HammerJS是一个优秀的、轻量级的触屏设备手势库
- hammer.js https://github.com/hammerjs/hammer.js
3. Git 复习
(1). 复习git的基本使用
git pull 拉取并merge代码
git add .; //添加 暂存区
git commit -m ‘zhu shi’// 提交到本地仓库并加上注释
git push origin master //往远程仓库推送代码
(2). 多人协作方式
a) 分支的构建
git branch -a 查看所有的分支
git checkout -b aaa 创建新的分支aaa
git checkout aaa 切换到aaa分支
git push origin aaa 推送aaa 分支到远程仓库aaa分支
git push origin master:aaa 推送master 到远程的aaa 分支
git branch -d 删除一个分支
b) 冲突的产生与解决
两人同时修改同一个文件,一个人上传远程仓库成功, 另一个人再上传会失败。
(1)git pull, (拉取服务器的代码, 会造成自动合并失败,需要手动合并)
(2) 手动合并代码(小乌龟等可视化git工具 进行代码对比)
4.经典web服务器nginx介绍
Nginx是一款自由的、开源的、高性能的HTTP服务器和反向代理服务器;同时也是一个IMAP、POP3、SMTP代理服务器;Nginx可以作为一个HTTP服务器进行网站的发布处理,另外Nginx可以作为反向代理进行负载均衡的实现。
(1)正向代理
正向代理最大的特点是客户端非常明确要访问的服务器地址;服务器只清楚请求来自哪个代理服务器,而不清楚来自哪个具体的客户端;正向代理模式屏蔽或者隐藏了真实客户端信息。
(2) 反向代理
客户端是无感知代理的存在的,反向代理对外都是透明的,访问者并不知道自己访问的是一个代理。因为客户端不需要任何配置就可以访问。
反向代理,“它代理的是服务端”,主要用于服务器集群分布式部署的情况下,反向代理隐藏了服务器的信息。
(3) nginx的基础配置(代理等)
最后
推荐一些系统学习的途径和方法。
每个Web开发人员必备,很权威很齐全的Web开发文档。作为学习辞典使用,可以查询到每个概念、方法、属性的详细解释,注意使用英文关键字搜索。里面的一些 HTML,CSS,HTTP 技术教程也相当不错。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
HTML 和 CSS: