使用VSCode下载并启动VUE项目，提交修改到git

1.现在VSCode并安装，并打开，可安装Vetur插件，便于后期开发，在后边展示插件查找方式
2.从git上拉取项目并导入到VSCode中
(1)Ctrl+Shift+`或者Ctrl+Alt+T打开终端
(2)cd到项目需要保存的文件夹下：如cd D:\software\VSCode file\
(3)使用get命令拉取项目：git clone https://git.xx.com\xxx.git
注意：只能clone主干，如果需要拉取分支代码，则只能先clone主干后再切换到分支代码
(4)文件->打开文件夹，选择刚刚下载的项目接口导入到VSCode中。
3.配置并启动vue项目
(1)在终端中执行：npm install安装npm
(2)进入到需要启动的项目文件夹下，如我的项目是mp-ui，则在终端需要先执行：cd mp-ui
(3)启动项目有多种方式，一般是npm run dev或者npm run serve(注意：这里是serve不是server)
但run命令需要从package.json中读取配置文件，使用哪种命令可以启动需要按照各自的配置来选择，如我的package.json配置文件如下：

{
  "name": "mp-ui",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "animate.css": "^3.7.2",
    "axios": "^0.18.0",
    "babel-polyfill": "^6.26.0",
    "core-js": "^3.4.4",
    "decimal.js": "^10.2.0",
    "element-ui": "2.13.0",
    "fingerprintjs2": "^2.0.6",
    "lodash": "^4.17.11",
    "moment": "^2.24.0",
    "vue": "^2.6.10",
    "vue-bus": "^1.2.0",
    "vue-cookies": "^1.5.12",
    "vue-i18n": "^8.7.0",
    "vue-router": "^3.1.3",
    "vuex": "^3.1.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.1.0",
    "@vue/cli-plugin-eslint": "^4.1.0",
    "@vue/cli-plugin-router": "^4.1.0",
    "@vue/cli-plugin-vuex": "^4.1.0",
    "@vue/cli-service": "^4.1.0",
    "babel-eslint": "^10.0.3",
    "eslint": "^5.16.0",
    "eslint-config-airbnb-base": "^14.0.0",
    "eslint-plugin-import": "^2.19.1",
    "eslint-plugin-vue": "^5.2.3",
    "less": "^3.0.4",
    "less-loader": "^5.0.0",
    "vue-template-compiler": "^2.6.10",
    "webpack-dev-server": "^2.9.7"
  }
}

其中：
“scripts”: {
“serve”: “vue-cli-service serve”,
“build”: “vue-cli-service build”,
“lint”: “vue-cli-service lint”
}
有serve有build，因此可以执行npm run serve和npm run build但无法执行npm run dev，因此执行npm run serve启动vue项目即可！

注意：
（1）如果在package.json的scripts中没有配置dev或者serve或者build，则执行npm run dev/serve/build会报错：

 npm ERR! missing script: dev

npm ERR! A complete log of this run can be found in:
npm ERR!     D:\software\Nodejs\node_cache\_logs\2020-11-09T09_19_09_998Z-debug.log

或者

PS D:\software\VSCode\VSCode File\mp-ui> npm run server
npm ERR! missing script: server
npm ERR! Did you mean this?
npm ERR!     serve

npm ERR! A complete log of this run can be found in:

从报错： npm ERR! missing script: dev/server可以看出，是丢失script，因此需要检查package.json中scripts中的配置，根据配置运行特定命令启动vue项目
（2）如果提示：‘vue-cli-service’ 不是内部或外部命令，也不是可运行的程序

PS D:\software\VSCode\VSCode File\unrm-ui> npm run serve

> mrp-ui@0.1.0 serve D:\software\VSCode\VSCode File\unrm-ui
> vue-cli-service serve

'vue-cli-service' 不是内部或外部命令，也不是可运行的程序
或批处理文件。
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! mrp-ui@0.1.0 serve: `vue-cli-service serve`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the mrp-ui@0.1.0 serve script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

npm ERR! A complete log of this run can be found in:
npm ERR!     D:\software\Nodejs\node_cache\_logs\2020-12-08T03_33_18_539Z-debug.log

解决方式：进入到项目文件夹下运行命令npm install --global vue-cli和npm install命令！

D:\..\uniform-ui> npm install --global vue-cli
npm WARN deprecated vue-cli@2.9.6: This package has been deprecated in favour of @vue/cli
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
D:\software\Nodejs\node_global\vue -> D:\software\Nodejs\node_global\node_modules\vue-cli\bin\vue
D:\software\Nodejs\node_global\vue-list -> D:\software\Nodejs\node_global\node_modules\vue-cli\bin\vue-listD:\donghongfei5\software\Nodejs\node_global\vue-init -> D:\software\Nodejs\node_global\node_modules\vue-cli\bin\vue-init+ vue-cli@2.9.6
added 236 packages from 204 contributors in 36.592s

4.修改文件，从VSCode提交代码到git
注意：提交到git需要依赖本地的git仓库，因此本地需要安装git仓库
点击git选项进入管理页面
没有问题则进行提交，分三步走，
第一步：暂存更改的文件
第二步：提交暂存的更改内容到本地仓库
第三步：push本地仓库更改文件到远程仓库
5.更新代码，则需要切换到git选项页，按照第三步中的拉取按钮，就可以更新代码
6.新建分支：
7.从某一个分支拉取一个新分支后，如果原分支代码修改，需要把原分支的修改代码合并到新分支上：

idea中是通过merge into current操作进行的：
8.如果git的密码修改了，在VSCode中是无法重新pull/push项目的，需要修改git的密码凭证
9.拉取到主干master中的代码后，如果要切换到特定分支上，在该分支修改代码，如需要先把分支代码拉取下来：
方式一：
点击左下角位置，找到特定分支即可拉取！
方式二：
1、git clone git@git.n.xxx.com:xxx/xxx.git
2、git fetch origin dev 命令来把远程dev分支拉到本地
3、checkout -b dev origin/dev 在本地创建分支dev并切换到该分支
4、git pull origin dev 就可以把远程dev分支上的内容都拉取到本地了
注：当本地代码是dev分支时，需要先 git pull origin dev 更新远程分支代码到本地，然后再git pull （即拉取远程master分支更新到本地），否则会有冲突。
10.在当前开发的分支上再重新拉取一个新分支进行开发

1、git branch -a   --先查看下本地和远程分别有哪些分支
2、git branch dev  --创建一个名称为dev的分支
3、git checkout dev  --切换到本地的dev分支
4、git add .  -- 将代码暂存到暂存区（点前面有空格）
5、git commit -m "代码提交"  --提交代码到本地分支
6、git push -u origin "dev-pred2-20210201"   --本地代码推送到远程上
7、git branch -a   --查看后，会有一个  remotes/origin/dev-pred2-20210201记录

注意，如果使用git push推送时，报如下错误，可以增加-u再操作：
git push -u origin “dev-pred2-20210201” --本地代码推送到远程上

> git push origin dev-pred2-202010201
error: src refspec dev-pred2-202010201 does not match any
error: failed to push some refs to 'https://git.jd.com/hr/un-h5.git'

额外篇：
初始安装VSCode后，需要手动安装部分插件，利于快捷开发：
1.汉化处理
2.Auto Close Tag (自动闭合HTML/XML标签)
3.Auto Rename Tag (自动完成另一侧标签的同步修改)
4.Beautify (格式化 html ,js,css)
5.Bracket Pair Colorizer(给括号加上不同的颜色，便于区分不同的区块)
6.Debugger for Chrome(映射vscode上的断点到chrome上，方便调试)
7.ESLint(js语法纠错，可以自定义配置)
8.GitLens(方便查看git日志)
9.HTML CSS Support (智能提示CSS类名以及id)10.HTML Snippets(智能提示HTML标签，以及标签含义)
11.JavaScript(ES6) code snippets(ES6语法智能提示，以及快速输入)
12. jQuery Code Snippets(jQuery代码智能提示)
13.Markdown Preview Enhanced(实时预览markdown)
14.Material Icon Theme(vscode图标主题)
15.Icon fonts(图标字体)
16.open in browser(右键快速在浏览器中打开html文件)
17.Path Intellisense(自动提示文件路径)
18.React/Redux/react-router Snippets(React/Redux/react-router语法智能提示)
19.Vetur(Vue多功能集成插件，错误提示等)
20.Class autocomplete for HTML(智能提示HTML class =“”属性)
21.npm Intellisense(require 时的包提示)
22.设置eclipse或者idea等快捷键:Eclipse keymap或者Intellij…