从零开始搭建vue项目，并使用git管理

最新推荐文章于 2024-09-12 16:09:28 发布
原创 最新推荐文章于 2024-09-12 16:09:28 发布 · 2.9k 阅读 · 35 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #vue.js #node.js

本文详细介绍了从零开始搭建Vue项目的过程，包括安装Node.js、使用码云创建仓库、安装Git、生成SSH公钥，以及如何用vue-cli搭建项目和提交代码到线上仓库。通过这些步骤，读者可以成功建立并管理Vue项目。

从搭建项目环境到创建demo

1.安装node

  • 打开node官网，选择稳定版本下载安装（傻瓜式安装）
    by handy
  • 安装完成后可以在命令行终端输入node -v，如果可以看到安装的版本号，代表已经成功安装了
    npm是nodejs的包管理工具，会自动安装，输入npm -v同样可以看到安装的版本号
    by handy
如果安装过想再安装需要先卸载

找到应用直接卸载
by handy
删除文件
C:\Users{User}\AppData\Roaming\npm
C:\Users{User}\AppData\Roaming\npm-cache

在命令行输入node -v和npm -v会提示命令不存在，即卸载成功
by handy

2.使用码云创建仓库

  • 注册码云账号，新建仓库
    by handy
  • 点击创建后可以看到创建好的仓库，我们代码以后都放在这里，为此，需要让本地代码与线上关联起来
    by handy

3.安装Git

  • 进入Git官网，直接下载安装
    by handy
  • 安装后输入git --version可以看到安装的版本号
    by handy

4.生成SSH公钥

进入码云----》个人设置----》SSH公钥，点击怎样生成公钥会有详细介绍如何生成公钥
by handy

这里简单描述一下

  • 首先，安装git之后，在任意文件夹点击鼠标右键，会弹出Git Bash Here选项，点击进入命令行
    在这里插入图片描述
  • 输入如下命令，按照提示完成三次回车，即可生成 ssh key
ssh-keygen -t rsa -C "xxxxx@xxxxx.com"

【注意】：这里的 xxxxx@xxxxx.com 只是生成的 sshkey 的名称，并不约束或要求具体命名为某个邮箱

  • 输入如下命令，查看 ssh key
cat ~/.ssh/id_rsa.pub
  • 复制生成后的 ssh key，添加到公钥栏中，确定后完成添加
    by handy
  • 输入如下命令，首次使用需要确认并添加主机到本机SSH可信列表
ssh -T git@gitee.com

5.本地与线上关联

  • 选择新建仓库，点击clone，复制SSH下链接
    by handy
  • 本地文件夹(代码存放位置)下通过Git Bash Here打开git的命令行终端，输入git clone git@gitee.com:hahahandy/my_reader.git，文件就下载到了本地
    by handy
    by handy

6.用vue-cli搭建vue项目

  • 安装vue-cli脚手架，进入到my_reader，在命令行输入
npm install -g @vue/cli
  • 安装完成后可以输入vue --version查看版本
    by handy
  • 使用cmd输入（用git会有问题，选项选择不了）
vue create my_reader
  • 根据提示按照需要选择，然后等待创建完成
    by handy
  • 创建完成后可以看到脚手架已经帮我们创建好了很多文件
    by handy
  • 输入 cd my_reader 进入文件夹，输入npm run serve启动项目
    by handy
  • 在浏览器通过http://localhost:8080访问项目，当你看到这个页面时，项目就创建好啦
    by handy

7.提交代码到线上仓库

  • 用git命令提交代码到码云仓库中
  1. git add . //提交所有文件到暂存区
  2. git commit -m “vue initial” //将暂存区的文件提交到仓库区
  3. git push //将仓库区的代码提交到远程仓库，这里是线上的码云仓库
  • 在码云上打开我们的项目，可以看到代码都提交了
    如果本地代码不慎丢失，可以重新在这里clone，所以最好保持本地和线上代码一致
    by handy
    现在，大功告成！
    接下来，就是freestyle的时刻了！
handy_csdn
关注
VUE 与 GIT 安装项目
css兼容浏览器的各种背景渐变
12-07 536
最近学习VUE，希望将VUE中遇到的问题，记录下来，与大家分享，也希望路过的大神分享VUE学习经验及遇到的坑【比心】 今天学习了VUE与Git同步的使用方法，记录分享 一、下载 Node.js ： 官网下载，安装；https://nodejs.org/en/，直接下一步就好； 安装成功后，打开CMD，输入命令：node -v 回车 输入命令： npm -v 回车 二、安装GIT 官网下载安装：https://git-scm.com/ 安装成功后，之后操作我们将使用 Git Bash 三、注册码云，生成公钥
从零搭建Vue项目
你看又起风了的博客
04-28 1459
搭建Vue项目 一、安装 node 环境 1、下载地址为：Node.js 2、检查是否安装成功：如果输出版本号，说明安装node 环境成功 3、淘宝镜像：npmmirror 中国镜像站 执行 npm install -g cnpm –registry=https://registry.npm.taobao.org，安装npm镜像，检查是否安装成功 4、补充 ...
Vue（五）&&git
ZiminLi的博客
08-01 1506
将仓库内容传送到远程仓库，第一次传输需要输入用户名密码，输入正确后win10以上电脑会自动保存，输错也会自动保存，并且传输时会验证失败，需要修改凭证。当别人先上传到远程仓库后，自己为更新仓库，此时修改代码上传会报错，需要pull到本地进行合并，新的替换老的。克隆之后直接添加会失败，需要进入存在git仓库的文件夹下进行操作，并且可以查看到以往他人的操作。修改代码后再次查看提交状态，发现提示上传本地仓库的已修改，需要重新添加更新，使用。后克隆别人仓库里的项目到自己的本地仓库（私有状态下需要仓库拥有者分配权限）
vue其他之“git的简单使用”
空投在我怀里的博客
03-14 509
git branch -vv //查看当前的本地分支与远程分支的关联关系 git status//查看在你上次提交之后是否有对文件进行再次修改 git branch dev_wangrk //基于当前commit创建dev_wangrk分支 git checkout dev_wangrk //切换到新分支 git push //本地的分支版本上传到远程并合并 git branch -D developer//删除分支 git branch //查看本地分支 git config --li..
【git-02】用git管理vue项目
不知道在干嘛每天
12-10 828
将vue项目上传到gitee管理 一、准备工作 首先在gitee上面创建一个新仓库 用REAMD初始化仓库，设置分支可以是master或者master/develop或者其他 获取仓库的ssh访问链接 git@gitee.com:iHunzi/front-end-learning.git 创建一个Vue的项目（vue cli），已有项目忽略。。。 进入项目工程目录 cd xx/xx/xx 二、将本地仓库与gitee的远程仓库关联 在vue项目目录下，将这个目录设置成git本地仓库 git in
Vue项目使用Git-安装操作
Yt0601的博客
11-02 429
Gi网址、Git设置用户信息、Git提交代码命令
从零开始搭建Vue项目
编程不良人
03-06 532
目录 一、Vue思维导图 二、创建项目 1、报错。 2、开始处搜索powershell，以管理员的身份运行 3、输入下面的指令：set-ExecutionPolicy RemoteSigned 4、再次创建项目，成功！ 三、GitHub托管代码 1、创建仓库 2、GitHub仓库创建成功 四、项目提交到GitHub 1、第一种方式 2、第二种方式 五、划分目录结构 六、引入两个css文件 七、别名的配置 八、拷贝.editorconfig文件到新项目中 九、安装路由 一、
Vue3 从零搭建项目及插件的使用
01-20
本教程将引导你从零开始搭建一个基于Vue3的项目，并介绍如何使用组件库Element-UI。以下是相关知识点的详细说明： 1. **Vue3 特性**： - **Composition API**：Vue3 引入了Composition API，它允许开发者更灵活地...
从零开始一步一步搭建 Vue3 + Webpack5 项目脚手架指南
m0_61486963的博客
09-12 3477
从零开始一步一步搭建 Vue3 + Webpack5 项目脚手架指南
从零搭建vue3.0项目架构（附带代码、步骤详解）
词不达yi、的技术博客
11-18 6335
前言： 　　GitHub上我开源了vue-cli、vue-cli3两个库，文章末尾会附上GitHub仓库地址。这次把2.0的重新写了一遍，优化了一下。然后按照2.0的功能和代码，按照vue3.0的语法，完全重写了一遍。虽然名字叫cli，其实两个库都是基于vue-cli创建的。做这个的目的是为了工作中快速启动项目，毕竟切片打包、less、axios、vuex、router、UI框架、基础文件目录、权限，这些都是基操，当然项目不同，还是要做些调整的。这两个项目的master分支都是最基础的东西，里面还包含了几
带你10天精通vue框架（一）之git如何使用（过来人告诉你学习vue之前，要先熟悉git）
浮游的博客
06-18 534
今天是618，希望大家都能抢到物美价廉的商品，话不多说，咱们直接开始吧！ vue概述: 1、vue关注的是视图，那么开发者只需要将你的精力集中在数据上面。因为vue是通过数据进行驱动的(使用vue可以提高项目的开发效率) 2、vue和JS不是完全互通。 3、vue的特征：双向绑定，虚拟DOM 4、vue当中：指令，过滤器，计算属性，侦听器，组件等 5、当数据发生变化时，挂载的元素会被重置 vue官网当中看手册教程。 目标：当你看到任意的一个网站时，如果你要做某个功能，你脑海当要有思路。 vue引入 通过el
VUE 学习之路第一天（git 的使用）
z_c_z_的博客
06-03 344
1.下载git 下载地址：https://git-scm.com/downloads 2.git配置 git config --global user.name "zhangchunze" //绿色部分为GitHub用户名 git config --global user.email "QQ@qq.com" //这里用GitHub的注册邮箱 ssh-key -t rsa -C "QQ@qq.com" //此处“C”要大写，邮箱使用GitHub注册邮箱 输入后...
[Vue] vue-cli3.0安装
weixin_30649859的博客
08-20 186
1. node.js安装https://nodejs.org/en/download/ 2.npm的安装 由于新版的nodejs已经集成了npm，所以之前npm也一并安装好了。同样可以通过输入 "npm -v" 来测试是否成功安装。命令如下，出现版本提示表示安装成功: npm -v5.6.0 3. 安装vue-cli3.0 命令 ：npm install -g @vue/cli若出现错误：U...
Vue新建项目+git托管+初始配置+项目打包优化
qq_41550143的博客
02-21 787
Vue新建项目与git托管
vue安装与git安装
axzzy的博客
05-07 2177
node安装 npm 与 cnpm 淘宝团队做的国内镜像， 因为npm的服务器位于国外可能会影响安装。淘宝镜像与官方同步频率目前为 10分钟 一次以保证尽量与官方服务同步 -S：即npm install module_name --save,写入package.json的dependencies ,dependencies 是需要发布到生产环境的， -D：即npm install module_...
vue使用git提交代码预检测
weixin_30425949的博客
05-11 713
全局安装eslint、依赖 npm i -g eslint npm i -g eslint-plugin-vue eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard babel-eslint 检测是否还缺依赖 ...
vue基础——git管理vue项目
weixin_41357609的博客
03-15 342
【代码】vue基础——git管理vue项目。
VUE环境配置步骤及相关Git Bash命令的使用
weixin_33896069的博客
01-18 187
组件式开发中，一定少不了Vue，废话少说，开始进行Vue应用前的关键性配置 备注：（为方便进行配置，提前可以安装Git bash,下载路径——https://git-scm.com/downloads，安装略） 1.新建；新建项目文件夹（或称“目录”），进入新建的项目文件夹，右键选择“git bash here”，弹出命令框； 2.检查；在命令框中输入 node -v检查是否安装有...
Vue项目环境搭建及git仓库新建
2401_85124621的博客
06-24 1019
技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。tr"git push监控工作区的状态树，使用它会把工作时的所有变化提交到暂存区，包括文件内容修改(modified)以及新文件(new)，但不包括被删除的文件技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。
如何从零开始搭建git项目
最新发布
11-16
<think> 我们参考上述引用内容，总结从零开始搭建Git项目的详细步骤。根据引用[1]、[2]、[3]、[4]，我们可以归纳如下： 1. **安装Git**：首先确保在本地计算机上安装了Git（引用[3]提到安装Git，引用[4]提到配置全局用户信息）。 2. **创建远程仓库**：在代码托管平台（如GitHub、GitLab、Gitee等）上创建一个新的远程仓库（引用[1]和[3]都提到了在代码托管平台创建远程仓库）。 3. **初始化本地项目**： - 在本地创建一个项目文件夹（引用[2]：`mkdir demo && cd demo`）。 - 进入项目文件夹，初始化Git仓库（引用[1]和[2]：`git init`）。 4. **配置Git全局用户信息（如果尚未配置）**（引用[4]）： ```bash git config --global user.name "Your Name" git config --global user.email "your.email@example.com" ``` 5. **关联远程仓库**（引用[1]：`git remote add origin [远程仓库地址]`）。 6. **生成SSH公钥（可选，如果使用SSH方式）**（引用[3]和[4]）：如果使用SSH协议，需要生成SSH公钥并添加到代码托管平台。 7. **添加文件到暂存区并提交**（引用[1]）： - 将项目文件添加到暂存区：`git add .`（注意：`.`表示当前目录下所有文件） - 提交到本地仓库：`git commit -m "Initial commit"` 8. **推送代码到远程仓库**（引用[1]）： - 第一次推送时，需要设置上游分支：`git push --set-upstream origin master`（如果分支是master）或者使用`git push -u origin master`。注意：现在很多平台默认分支为main，因此可能需要使用`main`代替`master`。 此外，引用[3]还提到了使用vue-cli搭建vue项目，但这是特定于前端项目的步骤，不属于Git项目搭建的通用步骤。 因此，我们可以将步骤归纳为： ### 详细步骤 1. **安装Git**：如果未安装，请从[Git官网](https://git-scm.com/)下载并安装。 2. **创建远程仓库**： - 登录代码托管平台（如GitHub、Gitee等），创建一个新的空仓库，记录仓库地址（HTTPS或SSH）。 3. **初始化本地项目**： - 在本地创建项目文件夹并进入： ```bash mkdir my-project cd my-project ``` - 初始化本地Git仓库： ```bash git init ``` 4. **配置用户信息（如果未配置过全局信息）**： ```bash git config --global user.name "Your Name" git config --global user.email "your.email@example.com" ``` 5. **关联远程仓库**： ```bash git remote add origin [远程仓库地址] ``` 注意：将`[远程仓库地址]`替换为实际的URL。 6. **生成SSH公钥（如果使用SSH且未生成过）**： - 如果使用SSH方式且没有SSH密钥，需要生成： ```bash ssh-keygen -t rsa -C "your.email@example.com" ``` - 将生成的公钥（默认在`~/.ssh/id_rsa.pub`中）内容添加到代码托管平台的SSH公钥设置中。 7. **添加文件并提交**： - 在项目文件夹中创建或复制项目文件。 - 将文件添加到暂存区： ```bash git add . ``` - 提交到本地仓库： ```bash git commit -m "Initial commit" ``` 8. **推送代码到远程仓库**： - 首次推送： ```bash git push -u origin master # 如果远程分支是master # 或 git push -u origin main # 如果远程分支是main ``` 注意：根据远程仓库的默认分支名称选择（现在很多平台默认分支为main）。 ### 注意事项 - 如果远程仓库创建时包含了README或.gitignore等文件，在首次推送前需要先拉取（git pull）并合并，但通常我们创建空仓库避免此问题。 - 如果遇到推送失败，可能是因为远程仓库有本地没有的文件（如README），则需要先执行： ```bash git pull origin master --allow-unrelated-histories ``` 然后解决冲突后再推送。 以上步骤即可完成一个Git项目的从零搭建。 §§相关问题§§ 1. 如何解决首次推送时遇到的非相关历史冲突？ 2. 如何克隆一个已有的Git项目？ 3. 如何创建和使用.gitignore文件？ </think> 以下是**从零开始搭建Git项目的详细步骤**，结合最佳实践和引用内容整理： --- ### **步骤1：安装Git** - 下载Git：[官网地址](https://git-scm.com/) - 配置全局用户信息（引用[4]）： ```bash git config --global user.name "你的用户名" git config --global user.email "你的邮箱" ``` --- ### **步骤2：创建本地项目** 1. 新建项目文件夹并进入： ```bash mkdir my-project && cd my-project ``` 2. 初始化Git仓库（引用[1][2]）： ```bash git init # 生成.git隐藏文件夹 ``` --- ### **步骤3：关联远程仓库** 1. 在代码托管平台（如GitHub/Gitee）创建空仓库，获取仓库地址（如`https://gitee.com/yourname/project.git`）。 2. 关联远程仓库（引用[1]）： ```bash git remote add origin 远程仓库地址 ``` --- ### **步骤4：生成SSH公钥（可选但推荐）** - 避免每次输入密码（引用[3][4]）： ```bash ssh-keygen -t rsa -C "你的邮箱" # 生成密钥 cat ~/.ssh/id_rsa.pub # 复制公钥到平台SSH设置 ``` --- ### **步骤5：提交与推送代码** 1. 添加文件到暂存区（引用[1]）： ```bash git add . # 添加所有文件 # 或 git add 文件名 # 添加特定文件 ``` 2. 提交到本地仓库： ```bash git commit -m "Initial commit" # 提交描述 ``` 3. 首次推送到远程仓库（引用[1]）： ```bash git push -u origin master # -u关联分支，后续只需git push ``` --- ### **关键命令总结** | 步骤 | 命令 | 说明 | |------|------|------| | 初始化 | `git init` | 创建本地仓库 | | 关联远程 | `git remote add origin [url]` | 绑定远程仓库 | | 提交代码 | `git add .` + `git commit -m "msg"` | 本地提交 | | 推送 | `git push -u origin master` | 首次推送并关联分支 | --- ### **注意事项** 1. **分支命名**：新仓库默认分支可能是`main`而非`master`，用 `git branch -M main` 修改。 2. **冲突处理**：首次推送前确保远程仓库为空，否则需先`git pull --rebase`。 3. **忽略文件**：创建`.gitignore`文件排除`node_modules/`等目录（引用[2]）。 > 示例流程完整代码： > ```bash > mkdir demo && cd demo # 创建项目 > git init # 初始化 > git remote add origin https://gitee.com/yourname/project.git > git add . > git commit -m "首次提交" > git push -u origin master > ```
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值