Day 2 配置开发环境

1. git客户端配置 

   git已经成为源代码管理的事实标准,开发人员必备技能,我的win10环境安装tortoisegit作为客户端。

1.1.新建文件夹,我的电脑目录为D:\workspace\minisheetGit ,右键后出现如下选项,点击Git Clone...,

Day 2 配置开发环境
1.2.URL:填写https://gitee.com/zhouweng/mini_sheet 检查 Directory

Day 2 配置开发环境

 

1.3.点击OK后,自动下载源代码

Day 2 配置开发环境

 

1.4.mini_sheet的源代码格式如下:

Day 2 配置开发环境

 

1.5.源码下载成功,接下来是开发工具配置

 

2.    visual studio code工具配置

    visual studio code是一款优秀的前端开发工具,我最常用到的几个操作包括:

  1. ctrl+鼠标左键:跳转到函数或者参数的定义位置;

  2. alt+方向键左右:跳到之前或者之后的编辑位置;

  3. Ctrl+shift+F 或者 菜单Edit->Find in Files:  全项目查询关键字;

  4. 菜单 Terminal-> New Terminal: 打开命令行窗口;

2.1.安装VSC成功后,菜单 File -> Open folder... ,

Day 2 配置开发环境

 

2.2.选择 项目源码位置,按钮 “选择文件夹”

Day 2 配置开发环境

 

2.3.菜单 Terminal-> New Terminal

Day 2 配置开发环境

 

2.4.在底部的命令行窗口,依次键入 以下命令:

> npm install 

> npm install gulp -g

> npm run dev

Day 2 配置开发环境

 

2.5. 浏览器自动打开  localhost:3000 

Day 2 配置开发环境

 

2.6.自此,开发环境配置完毕

 

3.扩展知识

3.1. Google浏览器的F12调试模式

3.2.学习gulp的配置文件语法

3.3.学习npm命令及package.json语法

 

基础知识:git、visual studio code、google浏览器、gulp、npm

资源:

tortoisegit下载:https://tortoisegit.org/download/

VisualStudioCode下载:https://code.visualstudio.com/

npm介绍:https://www.npmjs.com/

gulp介绍:https://gulpjs.com/

 

上一篇:javascript – 如何使用Gulp auto-prefixer定位所有浏览器


下一篇:javascript – 使用Gulp将资产上传到s3