Vue
三十二、git
1.概述
官网https://git-scm.com/book/zh/v2/%E8%B5%B7%E6%AD%A5-%E5%AE%89%E8%A3%85-Git
GitHub网址:https://github.com/
Git是一个免费的、开源的分布式版本控制系统,可以快速高效地处理从小型到大型的各种项目。
Git易于学习,占地面积小,性能极快。它具有廉价的本地库,方便的暂存区域和多个工作流分支等特性。其性能优于Subversion、CVS、Perforce和ClearCase等版本控制工具。
项目内容合并
- 传统:U盘,qq,飞秋… compare
- svn 集中式代码管理工具
- git 分布式代码管理工具
Git和代码托管中心
代码托管中心是基于网络服务器的远程代码仓库,一般我们简单称为远程库。
局域网
GitLab
互联网
GitHub(外网)
Gitee码云(国内网站)
2.常用命令
命令名称 | 作用 |
---|---|
git config --global user.name 用户名 | 设置用户签名 |
git config --global user.email 邮箱 | 设置用户签名 |
git init | 初始化本地库 |
git status | 查看本地库状态 |
git add 文件名 | 添加到暂存区 |
git commit -m “日志信息” 文件名 | 提交到本地库 |
git reflog | 查看历史记录 |
git reset --hard 版本号 | 版本穿梭 |
3.本地仓库
右键打开git bash,输入git init
,初始化本地仓库,会新建一个.git隐藏目录
输入git add 文件名/.(全部文件)
,将文件添加到暂存区,输入git status
可以查看到git当前提交状态
输入git commit -m '第一次提交代码'
,提交到本地仓库,并且添加注释
输入git status
查看提交状态
修改代码后再次查看提交状态,发现提示上传本地仓库的已修改,需要重新添加更新,使用git add .
会自动匹配修改后的文件上传,git log
查看提交记录
git reset --hard HEAD^
回退上一个版本,git reflog
查看操作记录
git reset --hard 6位版本号
回退到指定版本
4.远程仓库
git diff 文件名
对比本地代码和本地仓库代码差异
输入git remote add 别名 仓库地址url
将远程仓库源添加到git中
输入git push -u origin master
将仓库内容传送到远程仓库,第一次传输需要输入用户名密码,输入正确后win10以上电脑会自动保存,输错也会自动保存,并且传输时会验证失败,需要修改凭证
5.团队内协作
(1)非冲突
输入git clone 地址
后克隆别人仓库里的项目到自己的本地仓库(私有状态下需要仓库拥有者分配权限)
克隆之后直接添加会失败,需要进入存在git仓库的文件夹下进行操作,并且可以查看到以往他人的操作
此时就可以上传(克隆后不需要添加地址了)
当别人先上传到远程仓库后,自己为更新仓库,此时修改代码上传会报错,需要pull到本地进行合并,新的替换老的
(2)冲突
当自己修改的文件和远程文件都是最新的时候,会自动合并失败
git会将双方都留下,自己决定如何操作
之后通过命令行重新上传即可
(3)可视化
也可以通过可视化工具进行冲突操作,vscode的可视化工具可以清晰看到修改过程
暂存更改,相当于git add
提交,相当于git commit
,可忽略前一步直接点击,相当于一键执行量两个命令
推送,相当于git push
冲突时
拉取代码,相当于git pull
6.跨团队协作
7.分支
(1)分支的好处
同时并行推进多个功能开发,提高开发效率。
各个分支在开发过程中,如果某一个分支开发失败,不会对其他分支有任何影响。失败的分支删除重新开始即可。
(2)分支的构建
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 **** 删除一个分支
(3)合并分支
正常合并
git merge 合并分支
冲突合并
冲突产生的原因:
合并分支时,两个分支在同一个文件的同一个位置有两套完全不同的修改。Git无法替我们决定使用哪一个。必须人为决定新代码内容。
8.SSH免密登录
运行命令ssh-keygen -t 加密算法 -C 地址邮箱
生成.ssh密钥目录
将公钥复制到账号设置里去
9.自建代码托管平台-GitLab
GitLab官网网址:https://about.gitlab.com/
(1)GitLab简介
GitLab是由GitLabInc.开发,使用MIT许可证的基于网络的Git仓库管理工具,且具有wiki和issue跟踪功能。使用Git作为代码管理工具,并在此基础上搭建起来的web服务。
GitLab由乌克兰程序员DmitriyZaporozhets和ValerySizov开发,它使用Ruby语言写成。后来,一些部分用Go语言重写。截止2018年5月,该公司约有290名团队成员,以及2000多名开源贡献者。GitLab被IBM,Sony,JülichResearchCenter,NASA,Alibaba,Invincea,O’ReillyMedia,Leibniz-Rechenzentrum(LRZ),CERN,SpaceX等组织使用。
(2)安装
服务器准备
准备一个系统为CentOS7以上版本的服务器,要求内存4G,磁盘50G。
关闭防火墙,并且配置好主机名和IP,保证服务器可以上网。
安装包准备
Yum在线安装gitlab-ce时,需要下载几百M的安装文件,非常耗时,所以最好提前把所需RPM包下载到本地,然后使用离线rpm的方式安装。
编写安装脚本
安装gitlab步骤比较繁琐,因此我们可以参考官网编写gitlab的安装脚本
10.vue项目git注意
会自动创建出git仓库,无需自己再git init
git commit会自动修复ESLint
在上传所有文件时自动忽略掉gitignore文件里面包含的内容的文件
三十三、nginx
nginx的基础配置(代理等)
1 nginx ‐c kerwin.conf 加载kerwin.conf 并启动服务器
2 //不能有中文目录
3
4 nginx ‐s
5 {
6 stop — fast shutdown
7 reload — reloading the configuration file(每次修改完kerwin.conf后 ,都通过
此方法 重新加载一次)
8
9 }
1 静态文件serve
2
3 location / {
4 root html;//是当前文件夹下有个html文件夹
5 index index.html index.html
6 }
7
8 location /frontend {
9 root html ;
10 #只要加载localhost/frontend路径 那么就会从 html/frontend/路径提供文件服务
11 }
1 下面四种情况分别用http://localhost/proxy/test.html 进行访问。
2 // 注意 /proxy/ 后面的/ 需要加上
3
4 (1)location /proxy/ {
5 proxy_pass http://127.0.0.1:8000/;
6 }
7
8 会被代理到http://127.0.0.1:8000/test.html 这个url
9
10 (2)相对于第一种,最后少一个 /
11 location /proxy/ {
12 proxy_pass http://127.0.0.1:8000;
13 }
14 会被代理到http://127.0.0.1:8000/proxy/test.html 这个url
15
16
17 (3)location /proxy/ {
18 proxy_pass http://127.0.0.1:8000/xiaoming/;
19 }
20 会被代理到http://127.0.0.1:8000/xiaoming/test.html 这个url。
21
22 (4)相对于第三种,最后少一个 / :
23
24 location /proxy/ {
25 proxy_pass http://127.0.0.1:8000/xiaoming;
26 }
27 会被代理到http://127.0.0.1:8000/xiaomingtest.html 这个url
28
29 // ^~ /proxy 以proxy 开头的
nginx启动
.\nginx.exe -c .\conf\kervin.conf
nginx停止
.\nginx.exe -s stop
nginx重启
.\nginx.exe -s reload
三十四、vue3
报错Resolve error: Cannot find module ‘vue-loader-v16/package.json’ - 更新node到最新版
热更新有问题,需要及时 手动刷新页面
import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'
const routes = [
]
const router = createRouter({
// history: createWebHistory(),// history 模式
history: createWebHashHistory(),// hash 模式
routes
})
export default router
//重定向
{
path: '/:any',
redirect: {
name: 'film' //命名路由写法
}
}
import { createStore } from 'vuex'
export default createStore({
})
Composition API介绍
起初定义的是Vue-Function-API,后经过社区意见收集,更名为Vue-Composition-API
reactive
作用:创建响应式对象,非包装对象,可以认为是模板中的状态。
react:
- 类写法
- 函数写法 -(不支持状态,,生命周期,支持属性)
—react hooks 钩住函数写法的状态vue3 - hooks - composition Api(没有this)
// vue3老写法 或者vue 写法 中 beforeCreate,created 生命周期=== setup
setup(){
console.log("setup")
//定义状态
const obj = reactive({
myname:"zimin",
myage:100
})
const handleClick=()=>{
//console.log("1111111")
obj.myname = "xiaoming"
}
return {
obj,
handleClick
}
}
- template 可以放兄弟节点
- reactive 类似useState,如果参数是字符串、数字,会报警告,value cannot be made reactive,所以应该设置对象,这样可以数据驱动页面
ref
作用:创建一个包装式对象,含有一个响应式属性value。它和reactive的差别,就是有没有包装属性value
const count = ref(0)
,可以接收普通数据类型,count.value++
ref访问dom或者组件
<input type="text" ref="myinput"/>
//js
const myinput = ref(null)
console.log(myinput.value.value)
toRefs
默认直接展开state,那么此时reactive数据变成普通数据,通过toRefs,可以把reactive里的每个属性,转化为ref对象,这样展开后,就会变成多个ref对象,依然具有响应式特性