码云(gitee)的使用教程
<ul><li>
<p><code>nodejs</code> 第三方平台：<code>npmjs.org</code></p>
<ul>
<li>使用nodejs下载器：
<ul>
<li>
<ol>
<li>原生下载器(自带)：<code>npm</code></li>
<li>国内镜像下载器：<code>cnpm</code></li>
<li>yarn依赖管理器：暂时不推荐</li>
</ol>
</li>
</ul>
</li>
<li>使用<code>npm</code>安装<code>cnpm</code></li>
<li>三方包的分类：
<ul>
<li>全局包：提供在命令行里面的指令，通过命令行直接使用功能</li>
<li>局部包：需要以.js文件为媒体引入并使用其相应的功能，使用和内置模块非常相似</li>
<li>安装指令：<code>npm install cnpm -g --registry=https://registry.nlark.com</code></li>
</ul>
</li>
</ul>
</li>
<li>
<p>nodejs 热启动工具</p>
<ul>
<li>使用前把之前的node指令替换成<code>nodemon</code>指令</li>
</ul>
</li>
</ul>
<h3 id="nodejs局部模块使用">nodejs局部模块使用</h3>
<ul>
<li>用啥直接下载：
<ul>
<li><code>cnpm i axios --save</code>：下载<code>axios</code>并用nodejs记录下来</li>
<li>我们在安装局部模块的时候会在当前文件夹产生两个文件夹：
<ul>
<li>node_modules/文件夹 : 里面装的所有的局部模块代码还有依赖</li>
<li><code>package.json</code> ：项目说明书：用json格式描述当前项目的构成</li>
</ul>
</li>
<li>当我们下载完本地模块的时候，我们可以在当前文件夹之中随意引入并使用模块
<ul>
<li>引入模块方式和内置模块引入方式完全一样</li>
</ul>
</li>
</ul>
</li>
</ul>
<h3 id="nodejs项目环境搭建">nodejs项目环境搭建</h3>
<ul>
<li>所谓的项目环境搭建
<ul>
<li>项目：独立的文件夹</li>
<li>项目的名称：文件名，文件夹名都不能和内置模块或者第三方模块同名</li>
<li>文件夹内部结构
<ul>
<li>配置信息</li>
<li>模块源码</li>
</ul>
</li>
</ul>
</li>
<li>nodejs允许我们根据 <code>package.json</code> 一键下载内部依赖</li>
<li>0 - 1 建立项目：
<ul>
<li>创建<code>package.json:cnpm init -y</code></li>
<li>安装两个gulp文件：
<ul>
<li>全局gulp：<code>cnpm i gulp-cli-g</code></li>
<li>局部gulp：<code>cnpm i gulp --save</code></li>
</ul>
</li>
</ul>
</li>
</ul>
<h3 id="gulp">gulp</h3>
<ul>
<li>
<p>构建工程化环境</p>
</li>
<li>
<p>文件流的转存，转存过程之中的处理</p>
</li>
<li>
<p>PC端开发，gulp作为曾经的主流工程化工具</p>
</li>
<li>
<p>目前而言 gulp的生态计划已经被webpack全部霸占</p>
</li>
<li>
<p>很多现有的管理系统模板，都是使用gulp作为工程化环境</p>
</li>
<li>
<p>环境搭建：</p>
<ul>
<li>下载全局gulp：<code>cnpm i gulp-cli-g</code></li>
<li>下载局部gulp：<code>cnpm i gulp --save</code></li>
</ul>
</li>
<li>
<p>gulp配置</p>
<ul>
<li>在安装好环境的文件夹里创建<code>gulpfile.js</code>配置文件</li>
<li>我们把所有配置信息都写进<code>gulpfile.js</code>之中</li>
</ul>
</li>
<li>
<p><code>guipfile.js</code>配置</p>
<ul>
<li>需求目标：</li>
<li>自定义gulp执行</li>
</ul>
</li>
<li>
<p>运行步骤：</p>
<ul>
<li>
<p>引入本地安装好的gulp指令</p>
</li>
<li>
<p><code>gulp.task("指令名","执行指令的函数")</code></p>
<ul>
<li>执行指令的函数要求必须是 <code>async</code></li>
<li>必须在gulp环境配置的文件夹之中输入指令 <code>gulp 指令名</code></li>
</ul>
<pre><code class="language-js">gulp.task("sayhello", async() => {
console.log("hello gulp");
});
</code></pre>
<ul>
<li><code>gulp.src([找到对应的源文件]) 返回值是一个文件数据流</code></li>
<li><code>.pipe( 数据流的操作方法 )</code></li>
<li><code>gulp.dest("文件路径") 把pipe之中的数据流转存到某个位置</code></li>
</ul>
<pre><code class="language-js">gulp.task("html", async() => {
// 路径都是从gulpfile.js开始查找的,以gulfiles为起始点
gulp.src(["./index.html"])
.pipe(gulp.dest("../dist"));
// 带有规则的字符串路径
gulp.src(["./src/*.html"])
.pipe(gulp.dest("./dist"))
})
</code></pre>
</li>
</ul>
</li>
<li>
<p>浏览器端的js是事件驱动，服务器端的js是指令驱动</p>
</li>
<li>
<p>监听：</p>
<ul>
<li>找到监听文件</li>
<li>监听文件改变之后，执行某个指令
<ul>
<li><code>gulp.watch</code>：文件进行监听</li>
<li><code>gulp.series</code>：同步任务队列</li>
<li><code>gulp.parallel</code>：异步任务队列</li>
</ul>
</li>
</ul>
<pre><code class="language-js">gulp.task("watch", async() => {
gulp.watch(["./index.html"], gulp.series(["html"]));
})
</code></pre>
</li>
</ul>
<h4 id="html结构拆分">html结构拆分</h4>
<ul>
<li>
<p>因为html结构太过庞大，所以我们要对其进行拆分</p>
</li>
<li>
<p><code>components(组件)</code> <code>template(模板)</code></p>
</li>
<li>
<p><code>gulp</code>插件：</p>
</li>
<li>
<ol>
<li><code>gulp-file-include</code>用于整合拆分出来的html结构合并成一个页面</li>
</ol>
<ul>
<li>
<ol>
<li>
<p>下载插件 ：<code>cnpm i gulp-file-include --save</code></p>
</li>
<li>
<p>引入：<code>const fileinclude = require("gulp-file-include")</code></p>
</li>
<li>
<p>配置指令</p>
<pre><code class="language-js">// 对html多增加一个插件处理;
.pipe(fileinclude({
prefix: '@@',
basepath: '@file'
}))
</code></pre>
</li>
</ol>
</li>
</ul>
</li>
</ul>
<h3 id="babel">babel</h3>
<ul>
<li>
<p>使用babel进行编译，将ES6转换为ES5</p>
</li>
<li>
<p><code>babel</code>的安装：<code>cnpm i --save gulp-babel @babel/core @babel/preset-env</code></p>
</li>
<li>
<p><code>babel</code>的使用</p>
<pre><code class="language-js">const gulp = require('gulp');
const babel = require('gulp-babel');
gulp.task('default', () =>
gulp.src('src/app.js')
.pipe(babel({
// 必须添加版本号
presets: ['@babel/env']
}))
.pipe(gulp.dest('dist'))
);
</code></pre>
</li>
</ul>
<h3 id="项目启动">项目启动</h3>
<ul>
<li>约定俗称的项目启动指令：<code>npm run(可以省略) start</code></li>
<li>我们编写npm开头的指令需要在package.json之中编写</li>
</ul>
<h2 id="版本管理工具">版本管理工具</h2>
<ul>
<li>在项目开发阶段，每个人对项目的更新都会被记录</li>
<li>我们有了这个工具之后可以在任意版本之中进行穿梭</li>
<li>版本管理工具可以依赖平台实现多人协作开发</li>
<li>可以提高代码的安全性
<ul>
<li>git可以实现代码的备份</li>
</ul>
</li>
<li>版本管理工具不只有git
<ul>
<li><code>SVN</code></li>
</ul>
</li>
</ul>
<h2 id="git">git</h2>
<ul>
<li>
<p>本地仓库：本地操作</p>
<ul>
<li>
<ol>
<li>
<p>创建本地仓库( 非规范操作，规范操作下不需要此步骤 )</p>
<p>指令：<code>git init</code></p>
</li>
</ol>
</li>
<li>
<ol start="2">
<li>
<p>把当前文件夹之中的所有文件放入暂存区( 正在关注的文件，此时文件不会被放入仓库之中生成版本 )</p>
<p>指令：<code>git add -A</code></p>
</li>
<li>
<p>把暂存区里面的文件放入本地仓库( 用版本管理系统管理文件，文件会生成唯一版本号 )</p>
<p>指令：<code>git commit -m "这个指令之后必须添加注释"</code></p>
</li>
</ol>
</li>
</ul>
</li>
<li>
<p>提交本地版本；之前：</p>
<ul>
<li>配置全局用户名，邮箱</li>
<li>指令：<code>git config --global user.email "邮箱名"</code></li>
<li>指令：<code>git config --global user.name "用户名"</code></li>
</ul>
</li>
<li>
<p>提交版本的作用：</p>
<ul>
<li>
<p>版本回溯：</p>
<ul>
<li>
<p>找到之前提交的版本号</p>
</li>
<li>
<p>指令：<code>git reflog</code></p>
</li>
<li>
<p>版本回溯指令</p>
</li>
<li>
<p>指令：<code>git reset --hard 版本号</code></p>
</li>
</ul>
</li>
</ul>
</li>
<li>
<p>远程操作</p>
<ul>
<li>平台：github ，gitlab(企业级) ，gitee(国内)</li>
<li>gitee</li>
</ul>
</li>
<li>
<p>远程操作指令：</p>
<ul>
<li>新建仓库时候用的指令：(把远程仓库直接下载到本地)</li>
<li><code>git clone</code> 仓库地址(https地址)
<ul>
<li>特性：仓库下载的时候是以文件夹的形式下载的</li>
<li>clone下来的仓库是自带本地仓库的，我们不需要额外的git init</li>
</ul>
</li>
</ul>
</li>
<li>
<p>仓库构成</p>
<ul>
<li>本地仓库
<ul>
<li>
<ol>
<li>.git(仓库源文件，这个文件我们不操作)</li>
<li>分区：
<ul>
<li>工作区(workspace)：但凡是我们看得见摸得着的东西都在工作区中</li>
<li>缓存区/暂存区：标记需要版本管理的文件，文件的当前状态也会被记录，这个区域是看不见的，在我们概念之中存在</li>
<li>我们通过git add 把工作区的文件/文件夹放入暂存区，被暂存区关注</li>
<li>本地仓库：把暂存区之中的代码进行本地备份，创建版本，这个代码备份就存储在本地仓库之中。本地仓库是不可见的</li>
</ul>
</li>
<li>工作区新增内容：
<ul>
<li>在vscode里面会有提示
<ul>
<li>绿色：新增文件</li>
<li>棕色：修改文件</li>
<li>红色：删除文件</li>
</ul>
</li>
<li>颜色提示可能有延时出现的情况</li>
</ul>
</li>
<li>目标：把新增文件提交到远程仓库
<ul>
<li>把文件放入到暂存区之中</li>
<li>把文件放入到本地仓库之中</li>
<li>本地仓库推送到远程进行更新：
<ul>
<li>指令：<code>git push -u origin master</code></li>
<li>origin：是一个变量代表远程仓库的地址；在clone的时候这个地址就已经被设置好了</li>
<li>master: 分支名</li>
</ul>
</li>
</ul>
</li>
</ol>
</li>
</ul>
</li>
</ul>
</li>
<li>
<p>注意事项：</p>
<ul>
<li>在远程clone下来的仓库才可以push，本地仓库不能push</li>
<li>仓库不能嵌套仓库</li>
</ul>
</li>
<li>
<p>单人开发工作流程</p>
<ul>
<li>
<ol>
<li>远程建立仓库</li>
<li>把远程仓库clone到本地</li>
<li>在远程仓库文件夹内添加代码</li>
<li>开发结束
<ul>
<li>add：<code>git add -A</code></li>
<li>commit：<code>git commit -m "这个指令之后必须添加注释"</code></li>
<li>push：<code>git push -u origin master</code></li>
</ul>
</li>
<li>开发结束</li>
</ol>
</li>
</ul>
</li>
<li>
<p>多人协作开发</p>
<ul>
<li>
<ol>
<li>组织：一组开发人员集合; 组织之中的所有人都可以进行项目开发</li>
</ol>
</li>
</ul>
</li>
</ul>
<h2 id="分支">分支</h2>
<ul>
<li>
<p>分支就是专属于你的当前版本的代码克隆;</p>
</li>
<li>
<p>创建分支 :</p>
<ul>
<li>
<p>复制一份代码，供我们使用;</p>
<ul>
<li>创建分支指令 : <code>git branch 分支名</code></li>
</ul>
</li>
<li>
<p>切换分支 ;</p>
<ul>
<li>切换分支指令 : <code>git checkout 分支名 </code></li>
<li>可以使用指令 查看分支信息: git branch (-a查看远程分支信息参数)</li>
</ul>
</li>
<li>
<p>注意 : 我们在切换分支时，当前分支必须提交版本 ;</p>
</li>
</ul>
</li>
<li>
<p>分支操作存在简写 : git checkout -B 分支名 (切换并创建分支)</p>
</li>
<li>
<p>删除分支 : <code>git branch -D 分支名</code>;</p>
</li>
<li>
<p>把分支提交到仓库之中 :</p>
<ul>
<li><code>git push -u origin 分支名</code> ;</li>
</ul>
</li>
<li>
<p>分支合并进度更新;</p>
<ul>
<li>
<ol>
<li>合并远程分支 :</li>
</ol>
<ul>
<li>指令：<code>git pull origin 分支名</code> ；</li>
<li>处理冲突即可</li>
</ul>
</li>
<li>
<ol start="2">
<li>本地分支合并</li>
</ol>
<ul>
<li>指令：<code>git merge 分支名</code> (会把其他分支内容合并到当前分支上);</li>
<li>我们需要合并的分支大概率不是master，所以我们应该在master分支上执行这个合并行为;</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div id="MySignature" role="contentinfo">
越努力，越幸运<br><br>
来源：https://www.cnblogs.com/Dqarden/p/15262045.html
頁:
[1]