前端学习配置教程一

今天药忘吃喽~ 2021-09-03 03:54 202阅读 0赞

> 配置这个都是很烦的啦！！这里总结记录一下哈!!!

## 前端学习配置环境一 ##

## 一：VSCode 的安装(win的配置) ##

### 1.1 下载 VSC ###

打开下载链接： [https://jomeswang.lanzous.com/iwWDzhz5eta][https_jomeswang.lanzous.com_iwWDzhz5eta]

### 1.2 安装 VSC ###

![639356c8dc7d8447838caf491255f990.png][]

![01e8daeb9628c732775585306d70a13e.png][]

之后一直下一步就好了

打开的初始页面如下：

![8f02820f84020184db5477ccf3d5023a.png][]

## 二： VSCode 的配置 ##

### 2.1 中文插件的安装 (Chinese (Simplified)) ###

![9bc06edeb7cfd31ed2a84d7f354783dc.png][]

之后重启VSC 来重载配置

### 2.2 安装 Live Server 插件 ###

![c859493e2e11faa88b10b79c5f482a65.png][]

### 2.3 配置 VSC 自动保存 ###

![41147e601ccda7cbeb02a2011dc78108.png][]

## 三： VSC 配置的 检验 ##

![084405764f3ae5407f0025997ae8c8f2.png][]

之后

![e7ce43c1bd338204f22dec88fc7335e5.png][]

将下面的代码复制进文件内

<!DOCTYPE html>
    <html lang="en">
    <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="icon" href="http://photo.jomeswang.top/20201102144734.png">
     <title>SZUEA</title>
    </head>
    
    <style>
     .center{ 
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-20%, -70%);
     }
     .centerImg{ 
     position: relative;;
     width: 30%;
     }
     .centerText{ 
     width: 30%;
     text-align: center;
     }
    </style>
    
    <body>
    
     <div class="center">
     <img class="centerImg" src="http://photo.jomeswang.top/20201102144734.png" alt="SZUEAIMG">
     <div class="centerText">
     SZUEA NB!!!
     </div>
     </div>
     
    </body>
    </html>

![80c17397408ff60207291c156a1d3110.png][]

最终效果：

![a54548d716954d0531938ef73ffb4d61.png][]

[https_jomeswang.lanzous.com_iwWDzhz5eta]: https://jomeswang.lanzous.com/iwWDzhz5eta
[639356c8dc7d8447838caf491255f990.png]: /images/20210813/b93d5413b7014a78ba6c8c1ba29eb3fb.png
[01e8daeb9628c732775585306d70a13e.png]: /images/20210813/0d33b740342c41dbabde2dd4bd35dbe7.png
[8f02820f84020184db5477ccf3d5023a.png]: /images/20210813/84a285c8def0403eb10bd2ce003f596c.png
[9bc06edeb7cfd31ed2a84d7f354783dc.png]: /images/20210813/5a2e67c5beec4e659101fa25c803d2b9.png
[c859493e2e11faa88b10b79c5f482a65.png]: /images/20210813/7b951cd246cb464498d37191d7802453.png
[41147e601ccda7cbeb02a2011dc78108.png]: /images/20210813/4cf4ce9f937744f7a33e11e6d2e65856.png
[084405764f3ae5407f0025997ae8c8f2.png]: /images/20210813/00b4ea48124540f88a8b96147d67a5e1.png
[e7ce43c1bd338204f22dec88fc7335e5.png]: /images/20210813/0764d603c2ff42929394aaa23550588a.png
[80c17397408ff60207291c156a1d3110.png]: /images/20210813/c70003daaeee4829bf021b90a52bb46a.png
[a54548d716954d0531938ef73ffb4d61.png]: /images/20210813/2a0b8b72be464ed7b919417ee748a6ef.png