Vue知识整理，10.项目-把本地项目托管到 gitee 码云中

声明：本教程不收取任何费用，欢迎转载请注明出处，尊重作者劳动成果，不得用于商业用途，侵权必究！！！

文章目录

一、前言

二、配置项目文件

1、.gitignore 项目忽略文件

2、README.md

3、有关开源协议LICENSE

三、把项目代码提交到本地的 .git 里面

四、把代码提交到远程仓库：github 或 gitee（码云）

1、github 或 gitee（码云）的区别

2、关联 gitee平台，上传下载代码

（1）把公钥放到gitee上面【这次操作以后，以后就不用重复操作了】

（2）新建仓库、配置仓库

（3）创建仓库成功

（4）Git全局设置【这次操作以后，以后就不用重复操作了】

（5）没有项目，创建 git 仓库

（6）***已有项目，关联 git 仓库

---

一、前言

上一节我们介绍了-制作项目首页的Header和Tabbar区域，详细可参考博文： 原创 Vue笔记整理，09.项目-制作项目首页的Header和Tabbar区域   在公司都是团队开发，下面我们来介绍下git代码管理协作工具

二、配置项目文件

首先，我们需要创建几个文件

1、.gitignore 项目忽略文件

我们在项目中像 node_modules 这些文件没必要上传到我们的 github/gitee 源代码仓库当中。

• node_modules 项目依赖文件，体积比较大
• .idea 它是一个文件夹，里面放了你自己webstorm工具相关的配置，如快捷键等，每个人都不一样
• .vscode 这个类似.idea，它是VScode工具相关的配置
• .git 存了一些版本信息，也没必要上传
• .DS_Store  mac系统自带文件

2、README.md

这是项目描述文件

3、有关开源协议LICENSE

可参照 mui-master中 LICENSE 文件，打开 LICENSE 文件协议，

我们可以看到它使用的 MIT 协议。这个是我们之前下载的 MUI 源码包，

MUI 的 github 地址：GitHub - dcloudio/mui: 最接近原生APP体验的高性能框架

把它拷贝到项目里面

The MIT License (MIT)

Copyright (c) 2014 connors and other contributors

Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

具体能不能够：免费使用、分发、二次开发等，可参考如下链接：

[主流开源协议之间有何异同？] (https://www.zhihu.com/question/19568896)

三、把项目代码提交到本地的 .git 里面

$  git init 

在项目中初始化git，执行此命令后，

会在项目目录下生成一个 .git 的隐藏文件夹

展示所有文件的状态。标红的，都是未提交的文件。

Untracked files 即没有被跟踪的文件。

$ git status

On branch master

No commits yet

Untracked files:

  (use "git add <file>..." to include in what will be committed)

        .babelrc

        dist/

        node_modules/

        package.json

        src/

        webpack.config.js

        "\345\205\210\350\277\220\350\241\214 npm install \345\256\211\350\243\205\344\276\235\350\265\226\345\214\205.txt"

nothing added to commit but untracked files present (use "git add" to track)

那么我们把它添加到跟踪文件

$ git add .

git add . 会把本地所有untrack的文件都加入暂存区，并且会根据.gitignore做过滤。

我们再来看一下文件状态，都变为 new file 了，还没有被提交

$ git status

On branch master

No commits yet

Changes to be committed:

  (use "git rm --cached <file>..." to unstage)

         new file:   .babelrc

        new file:   .gitignore

        new file:   dist/bundle.js

        new file:   package.json

        new file:   src/App.vue

        new file:   src/index.html

        new file:   src/lib/mui/css/mui.css

        new file:   src/lib/mui/css/mui.min.css

        new file:   src/lib/mui/fonts/mui.ttf

        new file:   src/lib/mui/js/mui.js

        new file:   src/lib/mui/js/mui.min.js

        new file:   src/main.js

        new file:   src/router.js

        new file:   webpack.config.js

        new file:   "\345\205\210\350\277\220\350\241\214 npm install \345\256\211\350\243\205\344\276\235\350\265\226\345\214\205.txt"

然后我们进行提交

$ git commit -m "init my project"

[master (root-commit) 2d66597] init my project

16 files changed, 14189 insertions(+)

create mode 100755 .babelrc

create mode 100644 .gitignore

create mode 100755 dist/bundle.js

create mode 100755 package.json

create mode 100755 src/App.vue

create mode 100755 src/index.html

create mode 100755 src/lib/mui/css/mui.css

create mode 100755 src/lib/mui/css/mui.min.css

create mode 100755 src/lib/mui/fonts/mui.ttf

create mode 100755 src/lib/mui/js/mui.js

create mode 100755 src/lib/mui/js/mui.min.js

create mode 100755 src/main.js

create mode 100755 src/router.js

create mode 100755 webpack.config.js

create mode 100755 "\345\205\210\350\277\220\350\241\214 npm install \345\256\211\350\243\205\344\276\235\350\265\226\345\214\205.txt"

提交成功以后，我们再来看一下状态

意思：当前在 master 主分支上，没有任何修改可提交，工作目录是干净的。

$ git status

On branch master

nothing to commit, working tree clean

此时，我们只是把项目提交到本地的 .git 里面去了，如下图：

四、把代码提交到远程仓库：github 或 gitee（码云）

它还没有跟远端的仓库作任何关联，如果要把它上传到远端仓库，

我们可以选择：github 或 gitee（码云），它们区别不大！

1、github 或 gitee（码云）的区别

github：服务器在国外，相对较多牛逼的开源项目，速度相对较慢

https://github.com/

gitee（码云）：服务器在国内，开源项目相对较少，上传下载速度相对比较快

Gitee - 基于 Git 的代码托管和研发协作平台

2、关联 gitee平台，上传下载代码

下面我们来演示关联 gitee平台，上传下载代码

（1）把公钥放到gitee上面【这次操作以后，以后就不用重复操作了】

只有你把自己电脑上的公钥，添加到 github 或 gitee 上面，

你才能在 github 或 gitee 上面，上传和下载代码

详细可参考：原创 git实战笔记系列：生成 ssh 公钥，查看获取放到github或gitee上

（2）新建仓库、配置仓库

点击加号，新建仓库

点击新建仓库，出现如下图界面：

如我写的仓库名称：vue-cms-yyh

其中选择语言、添加 .gitignore，不要动，默认就行。

其他大家视情况而定，这里我都设为默认的。

（3）创建仓库成功

出现如下类似界面，就说明创建仓库成功了

（4）Git全局设置【这次操作以后，以后就不用重复操作了】

要在 gitee(码云) 上，上传下载代码，

我们还需要配置自己在 gitee(码云) 上的全局用户名和邮箱，执行如下命令行：

git config --global user.name "你的用户名"
git config --global user.email "你的个人邮箱"

如果你不配置，有可能你之前使用的是 github 的全局用户名，它和 gitee 不通用！

另外需要注意的是：

注册gitee的时候，用户名我用的是邮箱。但gitee我进行了实名认证，那么用户名它会默认会你的真实姓名，

这样是不对的，并且退出登录，真实姓名加密码是登录不上去gitee的，所以邮箱和用户名都是我的邮箱号，如下操作：

在termnal根目录下输入命令：

Last login: Thu Jul  9 17:26:48 on ttys001

MacBook-Pro:~ luminal$ git config --global user.name "luminal_yyh@163.com"

MacBook-Pro:~ luminal$ git config --global user.email "luminal_yyh@163.com"

MacBook-Pro:~ luminal$ 

不这样操作，用户名如果写的真实姓名，就会报步骤6里面的错！

（5）没有项目，创建 git 仓库

这个是假设如果我们目前没有现成项目的情况！

mkdir vue-cms-yyh  新建目录vue-cms-yyh

touch README.md 新建文件README.md

（6）***已有项目，关联 git 仓库

cd 到项目目录

在 VSCode项目目下输入命令：

MacBook-Pro:vue-cms-yyh luminal$ git remote add origin https://gitee.com/yin_yu_hua/vue-cms-yyh.git

MacBook-Pro:vue-cms-yyh luminal$ git push -u origin master

报错1：fatal: not a git repository (or any of the parent directories): .git

MacBook-Pro:vue-cms-yyh luminal$ git remote add origin https://gitee.com/yin_yu_hua/vue-cms-yyh.git
fatal: not a git repository (or any of the parent directories): .git

说明你的项目，还没有进行git 初始化以及相关项目文件，提交到本地 git 仓库，也就是需要操作文章上面的 【三、把项目代码提交到本地的 .git 里面】

报错2：

Incorrect username or password (access token)

fatal: Authentication failed

在 VSCode项目目下输入命令：

MacBook-Pro:vue-cms-yyh luminal$ git remote add origin https://gitee.com/yin_yu_hua/vue-cms-yyh.git

MacBook-Pro:vue-cms-yyh luminal$ git push -u origin master

remote: luminal_yyh@163.com: Incorrect username or password (access token)

fatal: Authentication failed for ' https://gitee.com/yin_yu_hua/vue-cms-yyh.git/‘

在termnal根目录下输入命令：

Last login: Thu Jul  9 17:26:48 on ttys001

MacBook-Pro:~ luminal$ git config --global user.name "luminal_yyh@163.com"

MacBook-Pro:~ luminal$ git config --global user.email "luminal_yyh@163.com"

MacBook-Pro:~ luminal$ ssh -T git@gitee.com

The authenticity of host ' gitee.com (212.64.62.174)' can't be established.

ECDSA key fingerprint is SHA256:FQGC9Kn/eye1W8icdBgrQp+KkGYoFgbVr17bmjey0Wc.

Are you sure you want to continue connecting (yes/no)? yes

Warning: Permanently added 'gitee.com,212.64.62.174' (ECDSA) to the list of known hosts.

Hi 尹宇华 ! You've successfully authenticated, but GITEE.COM does not provide shell access.

MacBook-Pro:~ luminal$

在 VSCode项目目下输入命令，会提示输入账号和密码（之后提交就不需要了）：

在 VSCode项目目下输入命令：

MacBook-Pro:vue-cms-yyh luminal$ git push -u origin master

Counting objects: 24, done.

Delta compression using up to 8 threads.

Compressing objects: 100% (19/19), done.

Writing objects: 100% (24/24), 137.70 KiB | 5.99 MiB/s, done.

Total 24 (delta 0), reused 0 (delta 0)

remote: Powered by GITEE.COM [GNK-5.0]

To https://gitee.com/yin_yu_hua/vue-cms-yyh.git

* [new branch]      master -> master

Branch master set up to track remote branch master from origin.

MacBook-Pro:vue-cms-yyh luminal$

账号：luminal_yyh@163.com

密码：q。。。

刷新码云上面的项目，界面出现如下提交的内容：