文章目录

  • 1. 开班
    • 1.1 视频1
    • 1.2 视频2
  • 3.【Git入门】软件安装详情
    • 3.1 视频4: chrome配置
    • 3.2 视频5: VSCode配置
    • 3.3 视频7: 安装Node.js
  • 5. 【Git入门】命令行入门
    • 5.1 文件的查看操作
    • 5.2 文件的增加操作
    • 5.3 文件的其他操作
    • 5.4 脚本文件
  • 6. 【Git入门】本地仓库
    • 6.1 git六行配置
    • 6.2 视频2
    • 6.3 视频5
    • 6.4 视频7
    • 6.5 视频8
  • 7.【Git入门】Git远程仓库 - GitHub
    • 7.1 视频1
    • 7.2 视频2 上传
    • 7.3 视频3 下载
    • 7.4 视频4 一些骚操作
    • 视频5 markdown
  • 8. 【Git入门】个人博客搭建与域名购买
    • 8.1 Hugo 搭建个人博客
    • 8.2 购买域名
    • 8.3 域名配置
    • 8.4 备份记录

1. 开班

1.1 视频1

  • 百度指数
    查看python, java,php, javascript, 前端指数
  • 双拼输入法
  • 拉钩
    勾选城市, 3年以下经验查看当地城市的岗位需求

1.2 视频2

  • 遗忘曲线
    笔记, 回顾
    这个需要了解一下
  • 临摹到变现
    是一个自然而然的过程, 需要坚持之后才会水到渠成.
  • Done is better than perfect
    先满足需求, 等该事件结束后, 有空闲了开始深入.

3.【Git入门】软件安装详情

3.1 视频4: chrome配置

普通用户配置

  • Chrome登录账户同步配置
  • 安装uBlock屏蔽广告
  • 理解无痕窗口
    可用于测试

高级用户配置

  • 大面板可移动位置, 小面板也可以
  • 在开发者工具「里面」 按ESC可以新建控制台
  • Sources里面可以保存代码片段(Snippets)
    Snippets可以保存代码
  • Network要配置一下
    • 关闭show overview
    • 右键单击name, 然后选择
  • Network可以模拟慢网速/断网
  • 理解Preserve log选项
    不会清空之前的log
  • 理解Disable cache选项
    清空缓存

Chrome常用的快捷键(mac版)

  • 关闭页面
    Command + W
  • 新窗口打开页面
    按住Command, 然后单击
  • 撤销关闭
    Command + Shift + T
  • 刷新页面
    Command + R (Reload)
  • 打开开发者工具
    Command + I (Inspector)
  • 输入网址
    Command + L (Location)
  • 在新标签打开网页
    用输入网址快捷键后, 然后 Command + 回车

配置打印

  • 边距: 无
  • 勾选背景图片
  • 取消勾选页眉页脚
  • 导出为PDF

3.2 视频5: VSCode配置

必备配置

  • 自动保存Auto Save:onFocusChange
  • 自动格式化Format On Save (适合新人)
    自动格式化可能影响队友, 请工作后关闭

我的配置

  • 面板靠右
  • 字体新加Fira Code
  • 启用字体连字

Code Spell Checker

  • 防止代码里面单词拼错
  • 看到提示你一定要查字典修改

Git Easy

  • 方便操作Git

功能

  • 开启终端, 开启第二个终端
  • 搜索文件夹, 搜索当前文件, 搜索选中区域
    • 选中区域替换
  • 设置语法 (不要用纯文本)
  • Emmet 快捷写代码
    • 为1-4各自加一个div
    1. 选中操作的行
    2. Command + Shift + P, 然后输入Emmet Wrap, 最后选择输入缩写包含个别行
    3. 输入 div*, 回车
    • 为1-4生成ul和li
    1. 同上
    2. 同上
    3. 输入 ul>li*, 回车
  • Git 操作(讲Git的时候讲)
  • 调试 JavaScript/TypeScript(核心阶段的时候讲)

快捷键

  • 找文件
    Ctrl + P
  • 输命令
    Ctrl + Shift + P

3.3 视频7: 安装Node.js

安装双数版本

  • Node8, Node10, Node12

安装后
-自然就有node命令
-自然就有npm命令
-自然就有npx命令

进入终端

bogon:~ bens$ node -v
v8.16.2
bogon:~ bens$ npm -v
6.4.1
bogon:~ bens$ npx -v
6.4.1

配置Node.js
使用淘宝源(不要用cnpm)

  • npm i -g nrm

    bogon:~ bens$ nrm --version
1.2.1
  • nrm ls
  • nrm use taobao

安装http-server

bogon:~ bens$ sudo npm i -g http-server
/usr/local/bin/http-server -> /usr/local/lib/node_modules/http-server/bin/http-server
/usr/local/bin/hs -> /usr/local/lib/node_modules/http-server/bin/http-server
+ http-server@0.11.1
added 25 packages from 30 contributors in 6.652s
bogon:~ bens$ http-server --verison
Starting up http-server, serving ./public
Available on:http://127.0.0.1:8080http://192.168.2.112:8080http://192.168.0.159:8080
Hit CTRL-C to stop the server

bogon:~ bens$ which http-server
/usr/local/bin/http-server

hs是http-server的缩写

bogon:~ bens$ hs
Starting up http-server, serving ./public
Available on:http://127.0.0.1:8080http://192.168.2.112:8080http://192.168.0.159:8080
Hit CTRL-C to stop the server

安装yarn (mac上)
先下载 Homebrew 包管理工具

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

然后下载yarn

brew install yarn

查看是否配置好淘宝镜像

yarn config listyarn config get registry

配置淘宝镜像

yarn global add yrm
yrm ls
yrm use taobao

最后再查看是否配置好淘宝镜像

yarn config listyarn config get registry

5. 【Git入门】命令行入门

5.1 文件的查看操作

英文 缩写命令
link ln
change cd中的c
directory cd中的d
print working directory pwd

查看文件内容

  • cat [filePath]
    直接查看文件所有内容
    cat: Concatenate (串联)
  • head [filePath]
    查看最前10行(默认)
    查看自定义行数
    head [filePath] -n 15
  • tail [filepath]
    查看最后10行(默认)
    查看自定义行数
    tail [filePath] -n 15
  • less [filePath]
    将文件以一页一页的展示出来, 通过方向键(上和下)和字母( j和k)来翻页.

5.2 文件的增加操作

  • touch fileName.txt
  • echo test
  • echo test > fileName.txt
    加到文件中(若文件不存在则新建文件, 若存在则覆盖之前的内容)
  • echo test >> fileName.txt
    追加到文件中(若文件不存在则新建文件, 若存在则追加之前的内容)
  • echo -e "test1\ntest2" >> fileName.txt
    换行输出两行(必须要加-e)

    bogon:Desktop bens$ cat fileName.txt
1\n2
1
2

5.3 文件的其他操作

删除文件
-rf就是不带询问, 直接递归删除

rm -r(recursion) filename
rm -rf(recursion force) filename

移动和重命名都是一样的

move fileName [pathName]
move fileName1 fileName2

清空文件

echo "" > fileName

.表示当前目录

用默认程序打开文件

open fileName

修改文件最后更新时间

touch fileName

To Long, Don’t Read(TLDR)
命令常用功能组合
yarn安装

yarn global add tldr

以ls为例子

bogon:Desktop bens$ tldr ls
✔ Page not found. Updating cache...
✔ Creating index...lsList directory contents.- List files one per line:ls -1- List all files, including hidden files:ls -a- Long format list (permissions, ownership, size and modification date) of all files:ls -la- Long format list with size displayed using human readable units (KB, MB, GB):ls -lh- Long format list sorted by size (descending):ls -lS- Long format list of all files, sorted by modification date (oldest first):ls -ltr

5.4 脚本文件

  • 命令有成功有失败

    • 成功了什么都不显示
    • 失败了, 会提示error

  • 查看上一条执行命令操作状态

    echo $?

    成功返回0, 失败返回非0

  • &&操作
    当一条命令成功后, 才会执行另一条.

    (base) bensdeMacBook-Pro:Desktop bens$ ls
filename.txt
(base) bensdeMacBook-Pro:Desktop bens$ rm 1.txt && echo "111"
rm: 1.txt: No such file or directory
(base) bensdeMacBook-Pro:Desktop bens$ touch 1.txt
(base) bensdeMacBook-Pro:Desktop bens$ rm 1.txt && echo "111"
111
(base) bensdeMacBook-Pro:Desktop bens$ ls
filename.txt

  • ;不管成功失败都会执行吓一跳命令

    (base) bensdeMacBook-Pro:Desktop bens$ ls
filename.txt
(base) bensdeMacBook-Pro:Desktop bens$ rm 1.txt ; echo "111"
rm: 1.txt: No such file or directory
111

  • 把命令变成文件

    • 创建一个文件(有无后缀无所谓)
    touch oneCode
    • 添加权限
    chmod -x oneCode
    • 把执行的命令写到文件中
    mkdir $1
cd $1
touch index.html
touch style.css
touch main.jsecho -e "<!DOCTYPE html>\n<h1>标题<h1>" >> index.html
    • 运行
    ./oneCode floderName

    或

    sh oneCode floderName

6. 【Git入门】本地仓库

6.1 git六行配置

git config --global user.name 你的英文名
git config --global user.email 你的邮箱
git config --global push.default simple
git config --global core.quotepath false
git config --global core.editor “code --wait” git config --global core.autocrlf input

配置完之后可以查看一下配置成功与否.

bensdeMacBook-Pro:~ bens$ git config --global --list
user.name=bens1320
user.email=yu1piao09@163.com
push.default=simple
core.quotepath=false
core.editor=code --wait
core.autocrlf=input

6.2 视频2

  • 初始化:git init
  • 需要提交的: git add filename(或者.)
  • 描述那些变动是不需要提交的:.gitignore
    • node_modules
    • DS_Store
    • .idea
    • vscode
  • 提交:git commit -m 描述
  • 提交: git commit -v(verbose) (选这种最好)
  • 查看日志 : git log
  • 查看状态: git status

御剑飞行(切换版本)
通过git log 查看提交号前六位

bensdeMacBook-Pro:demo bens$ git reset --hard 72d447
HEAD is now at 72d447f 版本1

通过git reflog查看所有的提交

6.3 视频5

需要御剑飞行(版本切换)需要保证没有红色未提交的

6.4 视频7

  • 在当前点创建分支: git branch x
  • 切换分支: git checkout x
  • 查看分支: git branch
    切换分支时候发生冲突

    bensdeMacBook-Pro:demo bens$ git checkout x
error: Your local changes to the following files would be overwritten by checkout:index.html
Please commit your changes or stash them before you switch branches.
Aborting

6.5 视频8

首先到达master分支

  • 合并x分支: git merge x
    合并之后 使用 commit 不用带参数

7.【Git入门】Git远程仓库 - GitHub

7.1 视频1

如何生成ssh key

  • 生成 ssh key

    • GitHub有帮助文档
    • 运行ssh-keygen -t rsa -b 4096 -C your email
    • 然后一直回车, 直到没有提示
    • cat ~/.ssh/is_rsa.pub 的到公钥内容, 粘贴到GitHub上
    • 打开GitHub, 在设置页面填入公钥
  • 如何测试配对成功了
    • ssh -T git@github.com
    • 如果问你yes/no, 请回答yes并回车

原理示意图:

7.2 视频2 上传

  • git remote add origin git@xxx

    • 在本地添加远程仓库地址
    • origin是远程仓库的默认名字(一般是默认)
    • 不要使用http://地址, 因为每次都要输入密码
  • git push -u origin master
    • 推送本地master分支到远程origin的master分支
    • 如果 提示你应该git pull ... 你就git pull一下(必杀技加入-f)
    • git pull 是先把远程分支合并到本地对应的分支
    • 如果远程分支没有更新过, 才可以省略git pull
    • -u origin master的意思是设置上游分支
    • 之后就不用再设置上游分支, 直接git pull; git push
      原理示意图:
  • 如何上传其他分支
    • 方法一
      git push origin branchName:branchName(前一个branchName是起始, 后一个branchName是目的地)
    • 方法二
      git checkout branchName
      git push -u origin branchName

7.3 视频3 下载

域名是git开头的是ssh下载只能下载自己GitHub上的文件, 下载他人的用域名https开头的.
git clone

  • git clone git@?/xxx.git

    • 会在当前目录下创建一个xxx目录
    • xxx/.git是本地仓库
  • git clone git@?/xxx.git yyy
    • 会在本地新建yyy目录
  • git clone git@?xxx.git .
    • 不会新建目录, 直接下载目录内的文件到当前位置

下载速度慢git clone 满速下载教程

四连操作

  • git add
  • git commit -v
  • [git pull]如果与他人合作开发,则需要用到.
  • git push

7.4 视频4 一些骚操作

  • 上传两个远程仓库
    和上传一个仓库一样重复操作就行了
  • 命令快捷键(bash alias简化快捷键)
    • 创建 touch ~/.bashrc
    • echo
    echo 'alias ga="git add"'>> ~/.bashrc
echo 'alias gc="git commit -v"'>> ~/.bashrc
echo 'alias gl="git pull"'>> ~/.bashrc
echo 'alias gp="git push"'>> ~/.bashrc
echo 'alias gco="git checkout"'>> ~/.bashrc
echo 'alias gst="git status -sb"'>> ~/.bashrc
    • 运行source ~/.bashrc
  • 好看的glog(mac上运行不了)
    • 添加在~/.bashrc最后一行
    alias glog="git log --graph -- pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)<%an>%Creset' --abbrev-commit -- | less"
    • 运行source ~/.bashrc
  • 历史美化命令git rebase -i xxx

  • 通灵术git stash / git stash pop

视频5 markdown

.md和.markdown为markdown文件

8. 【Git入门】个人博客搭建与域名购买

8.1 Hugo 搭建个人博客

  • MAC 安装

    brew install hugo
hugo version
  • 看文档搞出网站
    • 进入Hugo官网, 跟着操作Step2到Step7
    1. 创建的文件名为 xxx.github.io-generator
    2. 中文配置为zh-Hans
    • 得到一个public目录, 这就是我们博客站点
    • hugo server -D 可以预览草稿
    • hugo server 可以浏览非草稿
  • 与Github Pages绑定
    • xxx.github.io-generator中创建.gitignore忽略/public/文件
    • 进入public后, git初始化
    • 创建repo名为xxx.github.io-generator
    • 连接public远程
    • 查看git中setting的GitHub Pages
  • 换主题
    • 进入hugo主题页面
      在 xxx.github.io-generator目录下clone
    • 下载好主题后,进行hugo -D
    • 然后进入public, 提交到git远程

8.2 购买域名

namesilo(方便)

  • 取消自动续费
  • 不保护隐私
  • 除了邮箱信息真实外, 其他随意填.

8.3 域名配置

  • 配置DNS
  • 把现有的无关配置删除
  • 配置四条A记录到185.199.108.153等IP
    GitHub上的DSN
  • mac用户: dig noall answer 域名
    出现刚配置的DSN
  • 配置GitHub Pages

    • 添加域名
    • 不开启HTTPS

8.4 备份记录

将忽略了public的其他文件, 在GitHub上创建一个新的repo, 然后与之远程连接起来.

方方-前端体系课程(一)相关推荐

  1. 方方-前端体系课程(二)

    文章目录 10.[HTML全解]HTML标签 10.1 视频:英语小课堂 10.2 视频:学习工具 10.3 视频:HTML起手式 10.4 视频:4 10.5 视频:5 10.6 视频:6 11.[ ...

  2. 方方-前端体系课程(三)

    文章目录 20.[JS全解]JavaScript 概览 20.1 视频:学JS的基本要求 20.2 视频:JS的历史 20.3 视频:中国前端的发展 21.[JS全解]内存图与JS世界(精品课) 21 ...

  3. 前端体系认识和我的技术栈——wsdchong

    前端体系认识和我的技术栈 文章目录 前端体系认识和我的技术栈 前言 往期的学习记录 第一阶段:认识(前端路线) 第二阶段:理解(从产品角度看前端) 第三阶段:实践(vue框架) 前端体系认识 别人的前 ...

  4. Vue：前端体系与前后端分离

    Vue:前端体系与前后端分离 概述 介绍 ​ Vue(读音/viu/,类似于 view)是一套用于构建用户界面的渐进式框架,发布干 2014 年 2 月. 与其它大型框架不同的是,Vue 被设计为可以 ...

  5. 前端项目课程7 banner设计注意事项

    前端项目课程7 banner设计注意事项 一.总结 一句话总结: 1.每个部分的里面的部分可以用相同的名字么,如何修改样式呢? 可以, 用模块名 + 比如上中下(top middle bottom) ...

  6. 前端项目课程5 登录界面如何做

    前端项目课程5 登录界面如何做 一.总结 一句话总结:找到好看的登录界面,然后模仿,再根据自己的需要加入自己的元素即可. 1.如何让块标签里面的行标签居中? 在块标签上面加 text-align:ce ...

  7. 网易微专业web前端开发课程视频教程分享

    网易微专业web前端开发课程 链接:点此下载 密码:oeqx 限时领取视频教程

  8. 《给后端工程师的前端开发课程》笔记

    ASP.Net服务器控件 给后端工程师的前端开发课程 HTML和CSS工作模式 前端工作模式:BS HTML5基础标签学习 p:定义一个段落(paragraph) a:超链接 img:图片 div:块 ...

  9. 初级前端工程师课程导航-姜威-专题视频课程

    初级前端工程师课程导航-895人已学习 课程介绍         本课程是<初级前端工程师系列课程>的导学目录,需要适配相应的课程才能融汇贯通 课程收益     本课程是<零基础前端 ...

最新文章

  1. (转).net webconfig使用IConfigurationSectionHandler自定section
  2. 前端ui 后台管理系统 简洁_Github上前端不可不知的可视化后台管理系统（1）
  3. SkyWalking学习笔记(CentOS环境)
  4. 中科大 计算机网络6 Internet结构和ISP
  5. 小记安装python的MySQLdb模块
  6. java 类的域_Java类中对象域的初始化
  7. Maven使用技巧001--- 离线更新nexus中央仓库索引的方案
  8. SQLServer 维护脚本分享（05）内存（Memory）
  9. 手机都可以直接敲R了，还要电脑干嘛
  10. 微软工程师主讲的SqlServer2005视频教程
  11. swf文件的反编译或着flash文件的反编译
  12. 斗鱼tv 服务器响应失败,斗鱼tv打不开怎么办 斗鱼直播打不开得解决办法
  13. APISpace 手机号码归属地API
  14. photoshop基础视频教程 [4G]
  15. 【机器人学习】六自由度机械臂动力学分析（扭矩计算）
  16. 航测无人机航线规划原理
  17. 获取文件夹下所有tif图片，并将16位图转为8位图
  18. 福昕PDF阅读器 连续阅读
  19. linux 安装zh.utf 8,debian下安装locale并设置zh_CN.UTF-8
  20. 纸壳CMS（ZKEACMS）体验升级，快速创建页面，直接在页面中修改内容

热门文章

  1. 微信小程序累计访客 UV
  2. 职业经理人和资本家的博弈
  3. 企业信息化建设-内部系统集成
  4. AVX 指令集并行技术优化积分计算圆周率 π
  5. MyBioSource 小鼠细胞角蛋白单克隆抗体
  6. 正则表达式（中英文）
  7. rsync—远程同步
  8. 安装 python 虚拟环境 ＞ pip install virtualenv -i https://pypi.tuna.tsinghua.edu.cn/simple/报错解决办法
  9. 科研（research）与研发（RD）思维有什么区别？
  10. 鼠标悬停效果imagehover.css和ihover.css(效果酷炫）