vue学习(二)基础入门-vscode

Love The Way You Lie 2023-05-31 06:55 12阅读 0赞

作为一个新手，可以说是连原生JS学得也不怎么样的人，一上来就要学vue，那肯定得找个好一点的IDE来顶住。

这个就是vscode了，是真的好用。

## 一、简述 ##

> Visual Studio Code（VScode ）官网地址：[https://code.visualstudio.com/][https_code.visualstudio.com]
> 
> Visual Studio Code（VScode ）github地址 ：[https://github.com/Microsoft/vscode][https_github.com_Microsoft_vscode]
> 
> Visual Studio Code（VScode ）入门视频：[https://www.imooc.com/learn/1106][https_www.imooc.com_learn_1106]

Visual Studio Code代码是一个轻量级但功能强大的源代码编辑器，它运行在桌面上，可用于windows、macos和linux。它带有对JavaScript、TypeScript和Node.js的内置支持，并为其他语言（如C++、Cype、Java、Python、PHP、GO）和运行时（如.NET和Unity）提供了丰富的扩展生态系统。

## 二、怎么安装插件？ ##

方法一：

*  按F1或Ctrl+Shift+p，输入extensions，点击第一个就可以
 *  ![img][]

方法二：

*  ctrl + P 然后输入 >ext install
 *  ![img][img 1]

方法三：

*  点击图中位置
 *  ![img][img 2]

## 三、插件 ##

> 插件官网：[https://marketplace.visualstudio.com/][https_marketplace.visualstudio.com]

## 四、VS code配置Git ##

### 1、环境搭建 ###

1.1、下载和安装VScode和Git。

1.2、给VScode配置Git

*  到码云里新建一个仓库，完成后码云会有一个命令教程按上面的来就行了
 *  码云中的使用教程：

Git 全局设置:
     
    git config --global user.name "ASxx" 
    git config --global user.email "123456789@qq.com"
     
    创建 git 仓库:
     
    mkdir wap // 项目在本地的路径
    cd wap
    git init 
    touch README.md 
    git add README.md 
    git commit -m "first commit" 
    git remote add origin https://git.oschina.net/name/package.git  // 远程仓库地址
    git push -u origin master
     
     
    已有项目：
     
    cd existing_git_repo
    git remote add origin https://git.oschina.net/name/package.git
    git push -u origin master

### **2、本地操作步骤：** ###

*  **1、用vs打开你的项目文件夹**

**![img][img 3]**

*  **2、配置git**
    
    打开Git Bash输入以下命令
    
    　　如果还没输入全局配置就先把这个全局配置输入上去

Git 全局设置:
     
    git config --global user.name "ASxx" 
    git config --global user.email "123456789@qq.com"
    
    然后开始做提交代码到码云的配置:
    
    cd d:/wamp/www/mall360/wap //首先指定到你的项目目录下
    git init
    touch README.md
    git add README.md
    git commit -m "first commit"
    git remote add origin https://git.oschina.net/name/package.git   //用你仓库的url
    git push -u origin master  //提交到你的仓库

正常情况下上面的命令执行完成后，本地文件夹会有一个隐藏的.git文件夹，云端你的仓库里应该会有一个 README.md 文件。

*  **3、在vscode中提交代码到仓库**

回到 VSCode 打开 git工作区 （就是 直接VSCode中 file -> open 项目所在文件夹），就会看到所有代码显示在这里

![img][img 4]

点击+号，把所有文件提交到暂存区。

然后打开菜单选择--提交已暂存的 ( Commit Staged )

![img][img 5]

然后按提示随便在消息框里输入一个消息，再按 ctrl + enter 提交：

![img][img 6]

然后把所有暂存的代码 push 云端：

![img][img 7]

点击后，会弹出让你输入账号密码，把你托管平台的账号密码输入上去就行了。

不出问题的话你整个项目就会提交到云端上了。

在 vs 中每次更新代码都会要输入账号密码，可以配置一下让 GIT 记住密码账号：

git config --global credential.helper store   //在Git Bash输入这个命令就可以了

*  **4、同步代码**

**这里说下平时修改代码后提交到云端的使用，和本地代码和云端同步**

随便打开一个文件，添加一个注释

![img][img 8]

可以看到git图标有一个提示，打开git工作区可以看到就是修改的这个文件

![img][img 9]

然后点击右侧的+号，把他暂存起来。

再在消息框里输入消息，按 ctrl + enter 提交暂存

![img][img 10]

再点击 push 提交，代码就提交到云端了。

![img][img 11]

打开 码云就可以看到了：

![img][img 12]

*  pull使用

比如当你在家里修改了代码提交到云端后，回到公司只需要用 vscode 打开项目点击菜单中的 pull 就可以同步过来了。

![img][img 13]

*  **5、克隆你的项目到本地**
    
    回到家后想修改代码，但是电脑没有文件怎么办呢？ 往下看
    
    首先你电脑还是的有 vscode 和 GIT，，然后用 git 把上面那些全局配置再执行一次，如下
    
        git config --global user.name "ASxx"
        git config --global user.email "123456789@qq.com"  
         
        git config --global credential.helper store   
        
        #然后打开Git Bash输入以下命令
        
        cd d:/test   //指定存放的目录
        git clone https://git.oschina.net/name/test.git   //你的仓库地址

![img][img 14]

下载成功，然后就可以用 vscode 打开项目修改了。修改后提交的步骤还是和上面一样：

暂存-》提交暂存-〉push提交到云端 就ok了。

[https_code.visualstudio.com]: https://code.visualstudio.com/
[https_github.com_Microsoft_vscode]: https://github.com/Microsoft/vscode
[https_www.imooc.com_learn_1106]: https://www.imooc.com/learn/1106
[img]: /images/20230531/ce4de08743ae44b4901428ec09940535.png
[img 1]: /images/20230531/3ea8c0902e4a499dab0fb5e740bb9472.png
[img 2]: /images/20230531/ae071186824b4cd482b8530b6e4c119e.png
[https_marketplace.visualstudio.com]: https://marketplace.visualstudio.com/
[img 3]: /images/20230531/766e5dfc07dd4fdeb4e69d3f6342ff24.png
[img 4]: /images/20230531/a083bd497a1c490fb6315e5237e33196.png
[img 5]: /images/20230531/37a2329afd284b03b30521ca946f6cba.png
[img 6]: /images/20230531/a4e8f9f36c7644c7979a73493184727f.png
[img 7]: /images/20230531/71eb8b6408cf41bebb9246b83cad49a5.png
[img 8]: /images/20230531/2f47954db7aa44139d9b5e7554d20543.png
[img 9]: /images/20230531/04941b43be9e434eaeba651c50c56dd3.png
[img 10]: /images/20230531/e584b52ed95f4dbe8a682419b1c2d4ed.png
[img 11]: /images/20230531/89dcfc2ae74049c8a744f8b04997230c.png
[img 12]: /images/20230531/53aee87d49f345ae99fd4d41de8df626.png
[img 13]: /images/20230531/bc18cfaac2254d7ca64919e9a34f6f64.png
[img 14]: /images/20230531/1a4754e794774b2496660ae1b1e323e8.png