同步操作将从 ymhold/vue-course 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
安装(略)
配置
配置 name 和 email
git config --global user.name "xxxx"
git config --global user.email "xxx@xxx.xxx"
使用 git:
查看当前仓库的状态
git status
初始化仓库
git init
文件状态:
未跟踪 → 暂存
git add <filename> 将文件切换到暂存的状态
git add * 将所有已修改(未跟踪)的文件暂存
暂存 → 未修改
git commit -m "xxxx" 将暂存的文件存储到仓库中
git commit -a -m "xxxx" 提交所有已修改的文件(未跟踪的文件不会提交)
未修改 → 修改
常用的命令
git restore <filename> # 恢复文件
git restore --staged <filename> # 取消暂存状态
git rm <filename> # 删除文件
git rm <filename> -f # 强制删除
git mv from to # 移动文件 重命名文件
git 在存储文件时,每一次代码代码的提交都会创建一个与之对应的节点,git 就是通过一个一个的节点来记录代码的状态的。节点会构成一个树状结构,树状结构就意味着这个树会存在分支,默认情况下仓库只有一个分支,命名为 master。在使用 git 时,可以创建多个分支,分支与分支之间相互独立,在一个分支上修改代码不会影响其他的分支。
git branch # 查看当前分支
git branch <branch name> # 创建新的分支
git branch -d <branch name> # 删除分支
git switch <branch name> # 切换分支
git switch -c <branch name> # 创建并切换分支
git merge <branch name> # 和并分支
在开发中,都是在自己的分支上编写代码,代码编写完成后,在将自己的分支合并到主分支中。
在开发中除了通过 merge 来合并分支外,还可以通过变基来完成分支的合并。
我们通过 merge 合并分支时,在提交记录中会将所有的分支创建和分支合并的过程全部都显示出来,这样当项目比较复杂,开发过程比较波折时,我必须要反复的创建、合并、删除分支。这样一来将会使得我们代码的提交记录变得极为混乱。
原理(变基时发生了什么):
变基和 merge 对于合并分支来说最终的结果是一样的!但是变基会使得代码的提交记录更整洁更清晰!注意!大部分情况下合并和变基是可以互换的,但是如果分支已经提交给了远程仓库,那么这时尽量不要变基。
目前我对于 git 所有操作都是在本地进行的。在开发中显然不能这样的,这时我们就需要一个远程的 git 仓库。远程的 git 仓库和本地的本质没有什么区别,不同点在于远程的仓库可以被多人同时访问使用,方便我们协同开发。在实际工作中,git 的服务器通常由公司搭建内部使用或是购买一些公共的私有 git 服务器。我们学习阶段,直接使用一些开放的公共 git 仓库。目前我们常用的库有两个:GitHub 和 Gitee(码云)
将本地库上传 git:
git remote add origin https://github.com/lilichao/git-demo.git
# git remote add <remote name> <url>
git branch -M main
# 修改分支的名字的为main
git push -u origin main
# git push 将代码上传服务器上
将本地库上传 gitee:
git remote add gitee https://gitee.com/ymhold/vue-course.git
git push -u gitee main
git remote # 列出当前的关联的远程库
git remote add <远程库名> <url> # 关联远程仓库
git remote remove <远程库名> # 删除远程库
git push -u <远程库名> <分支名> # 向远程库推送代码,并和当前分支关联
git push <远程库> <本地分支>:<远程分支>
git clone <url> # 从远程库下载代码
git push # 如果本地的版本低于远程库,push默认是推不上去
git fetch # 要想推送成功,必须先确保本地库和远程库的版本一致,fetch它会从远程仓库下载所有代码,但是它不会将代码和当前分支自动合并
# 使用fetch拉取代码后,必须要手动对代码进行合并
git pull # 从服务器上拉取代码并自动合并
注意:推送代码之前,一定要先从远程库中拉取最新的代码
当头指针没有执行某个分支的头部时,这种状态我们称为分离头指针(HEAD detached),分离头指针的状态下也可以操作操作代码,但是这些操作不会出现在任何的分支上,所以注意不要再分离头指针的状态下来操作仓库。
如果非得要回到后边的节点对代码进行操作,则可以选择创建分支后再操作
git switch -c <分支名> <提交id>
可以为提交记录设置标签,设置标签以后,可以通过标签快速的识别出不同的开发节点:
git tag
git tag 版本
git tag 版本 提交id
git push 远程仓库 标签名
git push 远程仓库 --tags
git tag -d 标签名 # 删除标签
git push 远程仓库 --delete 标签名 # 删除远程标签
默认情况下,git 会监视项目中所有内容,但是有些内容比如 node_modules 目录中的内容,我们不希望它被 git 所管理。我们可以在项目目录中添加一个.gitignore
文件,来设置那些需要 git 忽略的文件。
facebook 推出的开源的静态的内容管理系统,通过它可以快速的部署一个静态网站
使用:
网址:
安装
npx create-docusaurus@latest my-website classic
启动项目
npm start
或yarn start
构建项目
npm run build
或yarn build
配置项目:
添加页面:
案例地址:
使用步骤:
yarn init -y
webpack
、webpack-cli
src
目录,然后编写代码(index.js)yarn webpack
来对代码进行打包(打包后观察 dist 目录)配置文件(webpack.config.js)
const path = require("path")
module.exports = {
mode: "production",
entry: "./src/index.js",
output: {},
module: {
rules: [
{
test: /\.css$/i,
use: ["style-loader", "css-loader"]
}
]
}
}
在编写 js 代码时,经常需要使用一些 js 中的新特性,而新特性在旧的浏览器中兼容性并不好。此时就导致我们无法使用一些新的特性。
但是我们现在希望能够使用新的特性,我们可以采用折中的方案。依然使用新特性编写代码,但是代码编写完成时我们可以通过一些工具将新代码转换为旧代码。
babel 就是这样一个工具,可以将新的 js 语法转换为旧的 js,以提高代码的兼容性。
我们如果希望在 webpack 支持 babel,则需要向 webpack 中引入 babel 的 loader
使用步骤
安装 npm install -D babel-loader @babel/core @babel/preset-env
配置:
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"]
}
}
}
]
}
在 package.json 中设置兼容列表
"browserslist": [
"defaults"
]
插件(plugin)
插件用来为 webpack 来扩展功能
html-webpack-plugin
这个插件可以在打包代码后,自动在打包目录生成 html 页面
使用步骤:
plugins: [
new HTMLPlugin({
// title: "Hello Webpack",
template: "./src/index.html"
})
]
开发服务器(webpack-dev-server)
yarn add -D webpack-dev-server
yarn webpack serve --open
devtool:"inline-source-map"
配置源码的映射
Vite 也是前端的构建工具
相较于 webpack,vite 采用了不同的运行方式:
除了速度外,vite 使用起来也更加方便
基本使用:
安装开发依赖 vite
vite 的源码目录就是项目根目录
开发命令:
vite 启动开发服务器
vite build 打包代码
vite preview 预览打包后代码
使用命令构建
npm create vite@latest
yarn create vite
pnpm create vite
配置文件:vite.config.js
格式:
import { defineConfig } from "vite"
import legacy from "@vitejs/plugin-legacy"
export default defineConfig({
plugins: [
legacy({
targets: ["defaults"]
})
]
})
直接在网页中使用(像 jQuery 一样)
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
使用 vite
yarn add vite -D
代码:
// 组件,就是一个普通js对象
const App = {}
// 创建应用
const app = createApp(App)
// 挂载到页面
app.mount("#root")
自动创建项目
npm init vue@latest
yarn create vue
浏览器在渲染页面时,做了那些事:
渲染树(Render Tree)
重排、回流
重绘
例子:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<title>Document</title>
<style>
.box1 {
width: 200px;
height: 200px;
background-color: orange;
}
.box2 {
background-color: tomato;
}
.box3 {
width: 300px;
height: 400px;
font-size: 20px;
}
</style>
</head>
<body>
<button id="btn">点我一下</button>
<hr />
<div id="box1" class="box1"></div>
<script>
btn.onclick = () => {
// box1.classList.add("box2")
// 可以通过修改class来间接的影响样式,来减少重排的次数
// box1.style.width = "300px"
// box1.style.height = "400px"
// box1.style.fontSize = "20px"
// box1.classList.add("box3")
// box1.style.display = "none"
// box1.style.width = "300px"
// box1.style.height = "400px"
// box1.style.fontSize = "20px"
// div.style.display = "block"
}
</script>
</body>
</html>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。