Wootstrap 开发指南

一款专属「WUED」，基于 Bootstrap 并使用 HTML, CSS, 以及 JS 开发的 UI 品牌设计工具包。

1. 安装 Git

Git 和 SVN 一样，是一款版本管理工具，但是 Git 的使用更加广泛，是现在主流的版本管理系统。

1）下载对应操作系统的 Git 安装包 https://git-scm.com/download

2）在本地任意位置安装

3）检查是否安装成功

git version

在 vscode 控制台中敲入以上命令，如果返回版本号，则说明安装成功。

2. 拉取 Github 仓库代码

和使用 SVN 拉取代码一样，我们的代码托管在 Github

在 vscode 控制台中敲入以下命令，将代码拉取到本地

推荐在本地建一个叫 github 的空文件夹，然后进入这个文件夹运行命令：

git clone https://github.com/weaver-design/wootstrap.git

3. 安装 Nodejs 环境

Nodejs 是一套能在本地运行 Javascript 和打包工具的运行环境，通常安装包里还有 npm 包管理器。

1）下载对应操作系统的 Nodejs 安装包：https://nodejs.org/zh-cn/ (推荐使用稳定版)

2）在本地任意位置安装

3）检查是否安装成功

查看当前已安装 node 版本：

node -v

查看当前已安装 npm 版本：

npm -v

4. 本地开发

在 vscode 中打开 Wootstrap 工程目录，查看或修改源代码。

在 vscode 控制台中敲入以下命令，安装项目依赖：

npm install

在本地启动开发：

npm start

浏览器中访问：http://localhost:9001/

即可实时预览当前修改结果 :-)

5. 配置 Github SSH Key

打开命令行面板，输入：

ssh-keygen -t rsa

连续回车三次后，在 C:\Users\Administrator.ssh 中会发现新增了三个文件，其中 id_rsa.pub 为公钥，id_rsa 为私钥，说明密钥生成成功。

此时，使用编辑器打开 id_rsa.pub 公钥文件，看到形如以下的字符串：

ssh-rsa AAAAB3NzfdfdEAAAADAQABAAABAQCpXHOS7qBu31ci3Uyn4O4WEjbVFq8k/WuJyPEIXssZw2cozMHKd+Sxa3ySrMy77T06MjWnYfde2daffhlHMJUJbuovelmLRDJpqj8ErJx46mlSsU0fE5uD8KdRoh7jsLbHLWsUcye65IpZ4CWHRIzzbkZK46N6Zeo5gffdfW1BCKZRhKW2v/09ChJl1vEyCxW/5WreLXGgaDkBwb6G5dVuFuhgzGnmkMlxpdYaGnHr/lSNOH5swYRec6DCfgddIFfVER1LoPREKEwKs7CCEBVPjB96Qgucm9oDY63Ek62Z1kVzw50nPVYA6wfdfdfdf5hZupFjKBVvOqQh Administrator@201809101-PC

将你的自己的密钥字符串复制，粘贴到 Github SSH 配置面板，点击保存，即可完成本地提交与 Github 账号的绑定。

【参考文档】

6. VSCode 中提交代码

配置好以上 Github SSH Key 后，你可以在命令行中设置全局的登陆用户名和邮箱：

git config --global user.name Turkyden
git config --global user.email wj871287@gmail.com

配置完 Github 的账号密码，就可以在 vscode 中可视化提交代码了。

注意：请认真填写代码改动日志，最后推送到 Github 仓库。

【参考文档】