VsCode+Node的前端环境搭建并创建一个前端项目

VsCode

Visual Studio Code（以下简称vscode）是一个轻量且强大的代码编辑器，支持Windows，OS X和Linux。内置JavaScript、TypeScript和Node.js支持，而且拥有丰富的插件生态系统，可通过安装插件来支持C++、C#、Python、PHP等其他语言。

VsCode的安装（必须）
VSCode中文设置（可选）
1. 使用快捷键组合【Ctrl+Shift+p】，在搜索框中输入“configure display language”，点击确定后；
2. 修改locale.json文件下的属性“locale”为“zh-CN”;
VsCode 扩展
- vscode其实就是披着编译器的编辑器。很多功能可以去商店下载扩展的使用，下面给出个实用扩展的介绍链接，大家可以各取所需：http://www.cnblogs.com/zhangycun/p/9529623.html
VsCode Debug

安装扩展，添加调试配置，F5调试Chrome
- 安装扩展“Debugger for Chrome”就进行chrome调试，跟chrome的开发者工具一样的效果
  更为详细地址： https://www.cnblogs.com/codeww/p/7667543.html

NodeJs与NPM

NodeJs
- NodeJs安装
  菜鸟教程已经给我们说明的很清楚了，按照教程选择我们的电脑系统安装教程进行安装即可，安装完后便可在终端查询版本号
NPM
- NPM安装
  - 由于新版的nodejs已经集成了npm，所以之前npm也一并安装好了。同样可以通过输入 "npm -v" 来测试是否成功安装。命令如下，出现版本提示表示安装成功:
  - 如需要升级，windows在cmd中命令“npm install npm -g”，linux在运行命令“$ sudo npm install npm -g”
- 使用淘宝镜像
  由于npm的服务器在墙外，所以我们使用淘宝的镜像
  使用命令 npm install -g cnpm --registry=https://registry.npm.taobao.org
  这样就可以使用 cnpm 命令来安装模块了：
  cnpm与npm的命令差不多，基本都有。

前端项目

Express

Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用，和丰富的 HTTP 工具。使用 Express 可以快速地搭建一个完整功能的网站。

安装express npm install express -g
安装express应用生成器 npm install express-generator -g
打开vsCode的调试控制台里面的终端，输入命令express myexpress
cd myexpress 进入项目目录
npm install安装Node_moudule包
npm start启动项目
或者在vsCode打开MyNode这个文件夹使用F5就可以直接调试了或然后在浏览器输入http://localhost:3000/

VsCode+Node的前端环境搭建并创建一个前端项目

相关推荐