既然选择了远方,便只顾风雨兼程 __ HANS许

系列:零基础搭建前后端分离项目
VsCode

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

  • VsCode的安装

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

  • VSCode中文设置

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

    1. 使用快捷键组合【Ctrl+Shift+p】,在搜索框中输入“configure display language”,点击确定后;
    2. 修改locale.json文件下的属性“locale”为“zh-CN”;

    3. 重启编辑器,如果重启后vscode菜单等仍然是英文显示,在商店查看已安装的插件,把中文插件重新安装一遍(如下图),然后在重启工具。
  • VsCode 扩展
  • VsCode Debug

    安装扩展,添加调试配置,F5调试

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

    已经有牛人写好了:https://www.cnblogs.com/bindong/p/6045957.html

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

    • 简单命令
      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
  2. 安装express应用生成器 npm install express-generator -g
  3. 打开vsCode的调试控制台里面的终端,输入命令express myexpress
  4. cd myexpress 进入项目目录
  5. npm install安装Node_moudule包
  6. npm start启动项目
  7. 或者在vsCode打开MyNode这个文件夹使用F5就可以直接调试了或然后在浏览器输入http://localhost:3000/

enter description here

VsCode+Node的前端环境搭建及其理解并创建一个前端目录的更多相关文章

  1. day76:luffy:项目前端环境搭建&轮播图的实现

    目录 1.项目前端环境搭建 1.创建项目目录 2.前端初始化全局变量和全局方法 3.跨域CORS 4.axios配置 2.轮播图功能的实现 1.安装依赖模块 2.上传文件相关配置 3.注册home子应 ...

  2. win10下VSCode+CMake+Clang+GCC环境搭建

    win10下VSCode+CMake+Clang+GCC环境搭建 win10下VSCode+CMake+Clang+GCC环境搭建 安装软件 VSCode插件安装 新建文件夹, 开始撸代码 main. ...

  3. node.js+mysql环境搭建

    https://www.jianshu.com/p/9b338095cbe8 node.js+mysql环境搭建 0x01 前言 随着html web技术的发展,和全栈式开发的需求,对于前端人员来讲, ...

  4. Linux虚拟机中 Node.js 开发环境搭建

    Node.js 开发环境搭建: 1.下载CentOS镜像文件和VMWare虚拟机程序; 2.安装VMWare——>添加虚拟机——>选择CentOS镜像文件即可默认安装带有桌面的Linux虚 ...

  5. 基于windows环境VsCode的ESP32开发环境搭建

    1. 基于windows环境VsCode的ESP32开发环境搭建,网上有各类教程,但是我实测却不行. 例如我在vscode内安装的乐鑫插件,扩展配置项是下图这样: 而百度的各类博文却都是这样: 经过网 ...

  6. 亲测GO环境搭建,理解go build、go install、go get

    GO下载: GO语言中文网下载:https://studygolang.com/dl Mac下直接通过brew instatll go指令即可完成下载安装 GO环境变量配置: $GOROOT=/usr ...

  7. Kafka:ZK+Kafka+Spark Streaming集群环境搭建(十一)定制一个arvo格式文件发送到kafka的topic,通过Structured Streaming读取kafka的数据

    将arvo格式数据发送到kafka的topic 第一步:定制avro schema: { "type": "record", "name": ...

  8. mac下配置Node.js开发环境、express安装、创建项目

    mac下配置Node.js开发环境.express安装.创建项目 一.node.js的安装 去官网下载对应的平台版本就可以了,https://nodejs.org 二.express安装 sudo n ...

  9. 转载:4412环境搭建:arm-linux-gcc: 没有那个文件或目录

    4412环境搭建:arm-linux-gcc: 没有那个文件或目录 2014年10月15日 ⁄ 环境搭建 ⁄ 共 993字 ⁄ 字号 小 中 大 ⁄ 评论 11 条 ⁄ 阅读 6,125 次 最近弄了 ...

随机推荐

  1. ArchLinux 安装五笔输入法

    说明 自己的笔记本已经全盘做成了ArchLinux系统了,用着还好,苦于常用的五笔输入法在Arch下有点不太好装,参考wiki弄好了,这里简单记录下 这里使用ibus-rime 原因有二: ibus- ...

  2. 补习系列(20)-大话 WebSocket 与 "尬聊"的实现

    目录 一.聊聊 WebSocket 二.Stomp 是个什么鬼 三.SpringBoot 整合 WebSocket A. 引入依赖 B. WebSocket 配置 C. 控制器 D. 前端实现 四.参 ...

  3. PHP学习笔记 01 之表单传值

    一.HTML传值/PHP接收方法 1.GET(地址栏+问号+数据信息) (1)方式一:表单Form: method = 'get' GET接收数据方式: $_GET['表单元素name对应的值] (2 ...

  4. 防止系统锁屏-python、C++实现

    一.背景 作为一个开发,我的电脑经常是一个礼拜不关机,甚至时间更久,不知道在其他人看来这是不是一个常规操作.在日常工作中,我们的电脑也是一直处于非锁屏状态,出于对个人工作成果的安全性保护,我们公司给每 ...

  5. 谈一谈对象池SafeObjectPool能干什么

    前言 首先从ado.net的连接池开始了解,数据库操作通常是 new SqlConnection(). Open(). 使用完后 Close(),整个过程相当耗时,特别是频繁建议套字接连接的过程.ad ...

  6. 从源码解读线程(Thread)和线程池(ThreadPoolExecutor)的状态

    线程是比进程更加轻量级的调度执行单位,理解线程是理解并发编程的不可或缺的一部分:而生产过程中不可能永远使用裸线程,需要线程池技术,线程池是管理和调度线程的资源池.因为前不久遇到了一个关于线程状态的问题 ...

  7. eureka服务搭建

    Server端 引入eureka server的maven依赖 引入依赖时无需给定eureka的版本号,maven会根据当前使用的SpringCloud版本来判断应该引入哪个版本的euraka ser ...

  8. jqgrid postData post方式累加参数,缓存了原来的数据

    今天做项目的时候发现一个问题,我们有一个筛选项,一个是VIP用户,一个是普通用户,还有一个是全部用户,首先看下我们的selection <select name="" id= ...

  9. 如何用GoldWave批量删除mp3文件开头65秒?

    具体操作如下: 一.打开goldwave--文件--批处理 二.批处理设置:     添加需处理的文件或文件夹(右侧)         1.转换:设置转换格式.         2.处理:       ...

  10. ASP.NET Core 共享第三方依赖库部署的Bug(*.deps.json on 2.2.0 or 4.6.0 版本)

    背景: I try to put the Microsoft.*.dll and System.*.dll togather to a new folder.以便把(第三方或)系统的和应用的dll分开 ...