专栏
下载APP

2019-07-23   更新

03 开发环境准备
吕小鸣

从0到1 实战朋友圈移动Web App开发

吕小鸣 · 高级web前端工程师

能够生存下来的物种,并不是那些最强壮的,也不是那些最聪明的,而是那些对变化作出快速反应的。

——达尔文

工欲善其事必先利其器。在开发一个完整项目之前,准备一个完整的开发环境是非常重要的。当然如果你是一个前端大佬,可能这些环境早已用的滚瓜烂熟;但如果你是刚入坑前端,就跟着我一步一步把环境搭建起来:

1. 安装代码编辑器Sublime Text 3

图片描述

下载地址:https://www.sublimetext.com/3,可以选择自己的操作系统平台进行安装。

谈谈代码编辑器的选择:

当下流行的代码编辑器主要有:Visual Studio CodeSublime TextWebStorm三种,笔者觉得代码编辑器完全由自己的喜好和习惯决定,并没有一个完全正确的答案,正所谓萝卜白菜,各有所爱。从当前的趋势看来,Visual Studio Code 的使用者更多一些,这可能得益于精美的界面风格和完善的插件生态,笔者之前也是一直用的这款编辑器;WebStorm 的功能也很强大,但是太过笨重。这次之所以没有用这两个而是选择 Sublime Text,是为了体验一下新鲜的事物,总有点喜新厌旧的感觉。从效果上来看,Sublime Text 更加轻便,如果长时间操作,也不会有卡顿的感觉。

2. 下载安装Node.js

下载地址:Node.js
图片描述

安装的时候注意要选择 Add to PATH,这样才能在命令行终端使用 node 命令。
安装完了 Node.js 之后就有了 Npm 包管理工具,但是鉴于国内的一些网络问题,可以选择使用 CNPM (淘宝NPM镜像)来安装相关的模块,在后面的项目实战中我们会使用cnpm来安装我们的项目依赖。

npm install -g cnpm --registry=https://registry.npm.taobao.org

3. 下载安装MongoDB

下载地址:MongoDB,在 Server 选项下,选择自己操作系统平台的进行安装。
图片描述
windows 安装界面:
图片描述
一路下一步,选择合适的安装目录。
图片描述

注意这里 Install MongoDB Compass (可视化工具),勾选这个选项会下载一个 MongoDB 的可视化工具,如果网络情况不太好的话可能会花很长的时间,所以不建议勾选。可以选择一个基于 Node.js开发的 MongoDB 可视化工具adminmongo

启动和关闭MongoDB

安装完 MongoDB 后,以管理员模式启动 CMD,切换到 MongoDB 的安装目录,并执行命令:

mongod.exe --dbpath "D:\mongodb\data\db"  --logpath "D:\mongodb\logs\log.txt"
  • –dbpath: 指定数据库文件的存放路径,\data\db路径没有的话需要自己新建一个。
  • –logpath:指定了日志文件的存放路径。
    此方法在当前的窗口启动 MongoDB,使用 ctrl+c 即可结束服务;如果想让服务长期在后台运行,可以使用:
mongod.exe --dbpath "D:\mongodb\data\db"  --logpath "D:\mongodb\logs\log.txt" --install -serviceName "MongoDB"  
  • –install: 指定作为一个 Windows 服务安装。

然后执行启动命令:

net start MongoDB

图片描述

停止命令:

net stop MongoDB
安装adminmongo

图片描述

adminmongo 是一个 MongoDB 的基于网页版的可视化管理工具,使用方便,安装简单。可以直接在 GitHub 上下载使用,Github 地址:adminmongo。使用git或者是下载源码zip:

git clone https://github.com/mrvautin/adminMongo.git

安装相关模块:

cd adminMongo
cnpm install

启动服务:

npm start

访问 http://127.0.0.1:1234 即可使用,第一次使用时需要配置 MongoDB 数据库 connection,这个我们会在后面讲解。
图片描述

小结

本章主要讲解了环境准备工作,包括代码编辑器的 Sublime Text 的安装,以及相关编辑器的介绍,Node.js 安装和 MongoDB 安装和使用方法。到这里我们的开发环境就已经搭建完成了,后面我们来看下屏幕适配方案的选择。

课程目录
取消 评论 发送