Vue（五）&&git

三十二、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等版本控制工具。
项目内容合并

1. 传统：U盘，qq，飞秋… compare
2. svn 集中式代码管理工具
3. 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({
	
})

1.Composition API介绍

起初定义的是Vue-Function-API，后经过社区意见收集，更名为Vue-Composition-API

（1）reactive

作用：创建响应式对象，非包装对象，可以认为是模板中的状态。

react：

1. 类写法
2. 函数写法 -（不支持状态，，生命周期，支持属性）
   —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，所以应该设置对象，这样可以数据驱动页面

（2）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)

（3）toRefs

默认直接展开state，那么此时reactive数据变成普通数据，通过toRefs，可以把reactive里的每个属性，转化为ref对象，这样展开后，就会变成多个ref对象，依然具有响应式特性

（4）props&emit

//
setup(props,{emit}){
	console.log(props)
	const handleShow = (){
		// emit（hooks） === this.$emit（类）
		emit("event")
	}
	return {
		handleShow
	}
}

（4）生命周期

vue2	vue3
beforeCreate	setup
created	setup
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestroy	onBeforeUnmount
destroyed	onUnmounted

（5）计算属性

import { reactive,computed } from 'vue'
setup(){
	const obj = reactive({
		mytext:'',
		datalist:["aaa","abb","abc","bbb","bcc","add","bcd"]
	})
	const filterlist =()=>{
		return obj.datalist.filter(item=>item.includes(obj.mytext))
	}
	const computedList =computed(()=>{
		return obj.datalist.filter(item=>item.includes(obj.mytext))
	)
	return {
		obj,
		filterlist,
		computedList
	}
}

（6）watch

import { reactive } from 'vue'
setup(){
	const obj = reactive({
		mytext:'',
		datalist:["aaa","abb","abc","bbb","bcc","add","bcd"]
	})
	watch(()=>obj.mytext,()=>{
		obj.datalist = obj.oldlist.filter((item) => item.includes(obj.mytext))
	})
	return {
		obj
	}
}

（7）自定义hooks

虽然composition api 比之前写法好像更麻烦了，但是用上自定义hooks就可以实现函数编程复用了，更加简洁高效了。一直在模仿。

（8）vuex替代方案

provide、inject是vue-composition-api的一个新功能：依赖注入功能