• 系列:零基础搭建前后端分离项目
  • VsCode
  • VsCode的安装
  • VSCode中文设置
  • VsCode 扩展
  • VsCode Debug
  • VsCode快捷方式
  • NodeJs与NPM
  • NodeJs
  • NPM
  • 前端项目
  • Express



 





VsCode

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

VsCode的安装

vscode就是个软件。看到该篇文章的肯定有安装过软件,就给你一些下载地址,下载完安装即可。默认安装的是C盘,你可以更改安装盘。

ps:使用教程wiki

在 vscode 中Java项目中的前端代码热更新_NPM

VSCode中文设置

正常情况下,vscode是英文的,那咱们是中国人,对中文比较熟悉,当然要是你是4 6 级英语大神,你就忽略了。

  1. 使用快捷键组合【Ctrl+Shift+p】,在搜索框中输入“configure display language”,点击确定后;
  2. 修改locale.json文件下的属性“locale”为“zh-CN”;
  3. 重启编辑器,如果重启后vscode菜单等仍然是英文显示,在商店查看已安装的插件,把中文插件重新安装一遍(如下图),然后在重启工具。
VsCode 扩展
  • vscode其实就是披着编译器的编辑器。很多功能可以去商店下载扩展的使用,下面给出个实用扩展的介绍链接,大家可以各取所需:
VsCode Debug
安装扩展,添加调试配置,F5调试

在 vscode 中Java项目中的前端代码热更新_操作系统_02

  • C#
    安装扩展“C#”,添加调试配置文件,进行调试
  1. 安装扩展
  2. 使用命令创建项目
  3. 运行项目
  4. 安装调试包
  5. 调试程序
  • Chrome
    安装扩展“Debugger for Chrome”就进行chrome调试,跟chrome的开发者工具一样的效果
    更为详细地址:
  1. 安装扩展 )
  2. 编写html
  3. 开始调试
VsCode快捷方式

已经有牛人写好了:



NodeJs与NPM
NodeJs
  • NodeJs安装
    菜鸟教程已经给我们说明的很清楚了,按照教程选择我们的电脑系统安装教程进行安装即可,安装完后便可在终端查询版本号。教程链接:http://www.runoob.com/nodejs/nodejs-install-setup.html
  • 在 vscode 中Java项目中的前端代码热更新_ViewUI_03

  • 简单命令
    Node.js REPL(Read Eval Print Loop:交互式解释器) 表示一个电脑的环境,类似 Window 系统的终端或 Unix/Linux shell,我们可以在终端中输入命令,并接收系统的响应。

命令

描述

Node -v

查看版本号

Node

进入Node交互模式

Node *.js

运行某个Js实例

ctrl + c

退出当前终端

ctrl + c 按下两次

退出 Node REPL

ctrl + d

退出 Node REPL.

向上/向下 键

查看输入的历史命令

tab 键

列出当前命令

.help

列出使用命令

.break

退出多行表达式

.clear

退出多行表达式

.save filename

保存当前的 Node REPL 会话到指定文件

.load filename

载入当前 Node REPL 会话的文件内容

cls(前提是已经退出node环境)

清屏

  • 创建第一个应用
NPM
  • NPM安装
  • 由于新版的nodejs已经集成了npm,所以之前npm也一并安装好了。同样可以通过输入 "npm -v" 来测试是否成功安装。命令如下,出现版本提示表示安装成功:
  • 如需要升级,windows在cmd中命令“npm install npm -g”,linux在运行命令“$ sudo npm install npm -g”
  • 简单命令

命令

描述

npm install express -g

安装模块(-g代表是全局,也就是在你电脑安装,若没有只会在你项目安装)

var express = require('express');

安装好之后,express 包就放在了工程目录下的 node_modules 目录中,因此在代码中只需要通过 require('express') 的方式就好,无需指定第三方包路径。

npm list -g

你可以使用以下命令来查看所有全局安装的模块:

npm list express

查看某个模块的版本号

npm uninstall express

卸载 Node.js 模块

npm ls

卸载后,你可以到 /node_modules/ 目录下查看包是否还存在,或者使用以下命令查看

npm update express

更新模块

npm search express

搜索模块

npm init

创建模块

npm publish

发布模块

  • 使用淘宝镜像
    由于npm的服务器在墙外,所以我们使用淘宝的镜像
    使用命令

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

  • 这样就可以使用 cnpm 命令来安装模块了:
    cnpm与npm的命令差不多,基本都有。



前端项目





Express

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

  1. 安装express

npm install express -g

  1. 安装express应用生成器

npm install express-generator -g

  1. 打开vsCode的调试控制台里面的终端,输入命令

express myexpresscd myexpressnpm install

  1. 安装Node_moudule包

npm start

  1. 启动项目
  2. 或者在vsCode打开MyNode这个文件夹使用F5就可以直接调试了或然后在浏览器输入http://localhost:3000/

 




在 vscode 中Java项目中的前端代码热更新_前端_04

enter description here



在 vscode 中Java项目中的前端代码热更新_NPM_05