vue项目初始化版本控制工具的使用

vue项目初始化

1. 使用 Vue CLI 创建项目

如果你还没有安装 VueCLI，请执行下面的命令安装或是升级：

 npm install --global @vue/cli

创建 Vue 项目：

 vue create forum-m

分别选择：

• Babel：es6 转 es5
• Router：路由
• Vuex：数据容器，存储共享数据
• CSS Pre-processors：CSS 预处理器，后面会提示你选择 less、sass、stylus 等
• Linter/Formatter：代码格式校验

是否使用 history 路由模式，这里输入 n 不使用

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n

选择 CSS 预处理器，这里选择我们熟悉的 Less

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
  Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass)
> Less
  Stylus

选择校验工具，这里选择 ESLint + Standard config

? Pick a linter / formatter config:
  ESLint with error prevention only
  ESLint + Airbnb config
> ESLint + Standard config
  ESLint + Prettier

选择在什么时机下触发代码格式校验：

? Pick additional lint features:
 (*) Lint on save
>(*) Lint and fix on commit

• Lint on save：每当保存文件的时候
• Lint and fix on commit：每当执行 git commit 提交的时候
• 这里建议两个都选上，更严谨。

Babel、ESLint 等工具会有一些额外的配置文件，这里的意思是问你将这些工具相关的配置文件写到哪里：

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json

• In dedicated config files：分别保存到单独的配置文件
• In package.json：保存到 package.json 文件中
• 这里建议选择第 1 个，保存到单独的配置文件，这样方便我们做自定义配置。

是否需要将刚才选择的一系列配置保存起来，然后它可以帮你记住上面的一系列选择，以便下次直接重用。

? Save this as a preset for future projects? (y/N) N

• 这里根据自己需要输入 y 或者 n，我这里输入 n 不需要。

安装结束，命令提示你项目创建成功，按照命令行的提示在终端中分别输入：

# 进入你的项目目录
cd toutiao-webapp

# 启动开发服务
npm run serve

如果能看到该页面，恭喜你，项目创建成功了。

2. Git 版本管理

2.1 创建远程仓库（项目经理）

1. 码云上创建仓库

2. 点击管理拉入你小组成员

3. 点击仓库成员管理---->点击开发者点击添加仓库成员----->点击邀请用户------>点击直接添加

• 此处可以搜索你的小组成员，点击添加一次性添加（此操作必须，否则无仓库操作权限）

2.2 创建本地仓库(项目经理推送所有分支)

# 删除项目中的 `.git` 文件夹
# 创建本地仓库
git init

# 将文件添加到暂存区
git add 文件

# 提交历史记录
git commit "提交日志"

# master分支创建release分支 
git branch release

# master分支创建develop分支 
git branch develop

# 查看分支
git branch

# 添加远端仓库地址
git remote add origin 你的远程仓库地址

# 推送提交
git push -u origin master

# 推送release分支
git push origin release

# 推送develop分支
git push origin develop

2.3 开发阶段

(1) 组员克隆项目

# 在任意目录操作  (仓库地址仅供参考)
git clone 你的远程仓库地址

# 拉取其他分支
git fetch 你的远程仓库地址 release:release

git fetch 你的远程仓库地址 develop:develop

(2) 创建任务分支

# 切换到develop分支
git checkout develop

# 例如创建登录分支  规范(feature/功能)
git checkout -b feature/login

(3)进行开发

当你开发完成一个小功能需要提交代码

# 添加到暂存
git add .

# 提交本地仓库 （不需要推送到远程仓库）
git commit -m '备注'

# 查看commit提交的历史数据
git log

# 回退版本
git reset --hard  {上个版本commit log}

# 强制推送到远程分支
git push -f origin <branch name>

(4)开发完毕

当你确认你的任务功能开发完毕后，合并到develop分支然后推送到远程

# 1.切换到develop分支
git checkout develop

# 2.拉取最新develop分支（没有配置origin直接使用仓库地址）
git pull origin develop

# 3.合并自己的任务分支   例如（featrue/questions）基础题库
git merge featrue/questions

# 4.推送develop分支 （没有配置origin直接使用仓库地址）
git push origin develop

2.4 测试阶段

1. 拉取远程develop分支到本地进行测试

# 拉取最新的develop分支到本地
git pull origin develop

# 合并到release分支
git checkout release
git merge develop

# 推送合并完成的release分支到远程仓库
git push origin release

在本地进行测试，且在禅道指派bug

2. 组员收到指派的bug后创建修复分支进行修复

• 创建修改bug的分支

# 拉取最新的release分支
git pull origin release

# 创建修改bug的分支   规范（hotfix/questions） 和开发分支命名一致功能命名
git checkout -b hotfix/questions

• 进行修复

# 添加暂存
  git add .
  
# 提交本地
git commit -m '修改基础题库bug-分页错误'

# 合并分支
git checkout release
git merge hotfix/questions

# 拉取最新release分支
git pull origin release

# 推送release分支
git push origin release

3. 测试完毕

# 拉取最新的develop分支到本地
git pull origin release

# 合并到release分支
git checkout master
git merge release

# 推送合并完成的release分支到远程仓库
git push origin master