visual studio配置node.js开发(完整版)

温馨提示:文章篇幅较长,请耐心看完

1.node.js安装

官网下载node.js,左边是【稳定版】,右边是【最新版】,下载【稳定版】就足够了,双击安装包进行安装

完成安装后,按下【win+R】,输入【cmd】,打开终端后输入下面的代码,测试安装是否成功,

node -v
npm -v

一般情况下,node.js在安装时会自动添加环境变量到系统中,如果没有出现下图结果,请先检查是否正确添加了环境变量

2.visual studio安装

安装完node.js后,官网下载最新版本的visual studio,下载【社区版】就足够了,双击安装包进行安装

安装完visual studio后,在开始菜单找到visual studio installer并打开

弹出如下窗口,点击【修改】

然后勾选node.js开发,点击【修改】

3.创建node.js应用

回到visual studio installer并点击【启动】

如图,点击【创建新项目】

我们搜索一下【node】,如图,这些就是我们能够创建的node.js项目模板

例如,我们选择第二个【空白Node.js Web应用程序】,点击【下一步】,注意我这里选择的是【JavaScript】,当然,你也可以选择TypeScript

接着,输入你的项目名称,并选择你的项目位置,点击【创建】

如图,一个空白的node.js项目就创建好了,现在我们就能够在当前的server.js中编写服务器代码,可以看到,server.js中预留了一些代码,用来发送“Hello World”,感兴趣可以试着运行一下

4.环境配置

在开发服务器时,我们需要用到很多常用的包,例如【express】、【mysql】、【axios】等,接下来,我们需要在项目中进行安装

在刚刚创建的项目右侧,我们展开文件夹【npm】->【dev】,这里面显示的就是我们已安装的包

选中任意包,按下鼠标【右键】,可以对其进行安装、更新、卸载等操作

然后我们选中【npm】文件夹,按下鼠标【右键】,并点击【安装新的npm包】

如果你选中了【dev】文件夹,那么你必须要记住:你安装的包存在【npm】文件夹的【dev】文件夹下,不要到时候花时间找半天还找不到

在左上角【输入框】中输入包名,然后选中你想要的包,点击【安装包】即可安装

安装完你需要的包后,如下图所示

当然,你也可以选择使用终端进行安装,我们右键选中【NodejsWebApp1】,在弹出的窗口中,找到【在终端中打开】一项,并点击

在下面的窗口中输入安装包的命令,按下【Enter】回车键以安装,按下右上角的【x】关闭终端窗口,例如我们输入:

npm install mysql

可以看到,使用终端进行安装,包也是存在【npm】文件夹下

5.程序运行和配置

我们在运行刚刚创建的程序时,会自动打开浏览器,并跳转到【1337】端口

如果我们想自动跳转到其他端口,需要下拉【Web服务器(Microsoft Edge)】,在弹出的窗口中点击【NodejsWebApp1调试属性】进行配置,如下图所示

以上便是利用visual studio进行node.js开发的详细过程,如果对你有帮助,希望留个赞(狗头)

  • 23
    点赞
  • 25
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Visual Studio Code 是一个运行于 OS X,Windows 和 Linux 之上的,针对于编写现代 web 和云应用的跨平台编辑器。 这标志着 Microsoft 第一次向开发者们提供了一款真正的跨平台编辑器。虽然完整版Visual Studio 仍然是只能运行在 Windows 之上,但是今天的声明向我们展示了这家公司对于支持其他计算机平台的承诺。 “很 多人都使用 Windows 作为他们的开发环境,但是我们也注意到了,还有很多人使用 Linux 和 Mac“,Somasegar,Microsoft 公司的开发者事业部总裁在这周稍早时候对笔者如是说道。”我们想让他们能够在他们习惯的平台上使用我们公司的产品,而不是非要迁徙到 Windows 上“。这些平台上的很多开发者们也更乐意于使用像 Sublime Text 这种轻量级的代码编辑器,而非像 Visual Studio 这种全特性的 IDE。 Visual Studio Code 为开发者们提供了对多种编程语言的内置支持,并且正如 Microsoft 在今天 Build 大会的 keynote 中所指出的,这款编辑器也会为这些语言都提供了丰富的代码补全和导航功能。JavaScript,TypeScript,Node.js 和 ASP.NET 5 开发者也将会获得额外的工具集。 该 编辑器也集成了所有一款现代编辑器所应该具备的特性,包括语法高亮(syntax hight lighting),可定制的热键绑定(customizable keyboard bindings),括号匹配(bracket matching)以及代码片段收集(snippets)。Somasegar 也告诉笔者这款编辑器也拥有对 Git 的开箱即用的支持。 正 如 Somasegar 所言,新款编辑器部分基于 Microsoft 为 Visual Studio Online 编写 Monaco 编辑器时的经验,但是该公司也正努力将一些 Visual Studio 的语言特性带到 Visual Studio Code 上,例如 Roslyn 项目,Microsoft 的 .NET 编译器平台。并且 Microsoft 声称这些为 VSC 打造的语言服务也会在其他编辑器包括 Sublime Text,Vi 以及 Atom 中可用。 上面提到的一些语言特性已经在其他编辑器中可用了。就在不久前,Microsoft 启动了针对 Sublime Text 的 TypeScript 插件项目,并且 Somasegar 告诉笔者该公司承诺会在未来启动更多类似于这样的项目(归根结底,是为了满足开发者们的需要)。 Visual Studio Code 的发布的确来的很突然。然后仔细想想这在一段时间之前就已经有了预兆,比如 .NET 内核的开源(以及使其能够跨平台运行)或者是社区版的 Visual Studio Community 的启动。 如果是在短短几年前,今天的宣布势必会引起轩然大波,但是今天,这对我们来说更多的是惊喜。 标签:visual
1 简介 1、Native APP(原生) 2、Hybrid APP(混合) 3、React Native Hybrid App按网页语言与程序语言的混合,通常分为三种类型:多View混合型,单View混合型,Web主体型。 2 技术 2.1 技术选型 Ionic 2.1.1 Ionic介绍 Ionic是一款基于Angular、Cordova的强大的HTML5移动应用开发框架,可以快速创建一个跨平台的移动医用。可以快速开发移动APP、移动WEB页面、微信公众平台应用,混合APP WEB页面。 2.1.2 Ionic和cordova、Angular关系 Ionic = cordova + Angular + ionic Css Ionic 是完全基于谷歌的 Angular 框架,在 Angular 基础上面做了一些封装,让我们可以更快速和容易的开发移动的项目。Ionic 调用原生的功能是基于 Cordova,Cordova 提供了使用JavaScript 调用 Native 功能,ionic 自己也封装了一套漂亮的 CSS UI 库。 2.1.3 开发工具 Visual Studio Code 2.1.4 管理工具 Git 2.2 环境搭建 2.2.1 概述 2.2.2 JDK 2.2.2.1 版本 jdk1.8 2.2.2.2 配置 JAVA_HOME PATH CLASSPATH 2.2.3 Apache ant 2.2.3.1 版本 1.9.12 2.2.3.2 解压 2.2.3.3 配置 ANT_HOME: D:\android\apache-ant-1.10.4 Path: %ANT_HOME%\bin 2.2.3.4 查看安装版本 ant –v 2.2.4 android SDK 2.2.4.1 版本 r24.4.1 2.2.4.2 配置 ANDROID_SDK_HOME: D:\Android\android-sdk-windows Path:%ANDROID_SDK_HOME%\platform-tools;%ANDROID_SDK_HOME%\tools 2.2.4.3 SDK 通过SDK Manager下载相关的版本 2.2.4.4 查看信息 android -h 2.2.5 node.js 2.2.5.1 版本 8.11.3 2.2.5.2 安装 2.2.5.3 查看版本 node –v npm -v 2.2.6 npm/cnpm 2.2.6.1 安装npm nodejs已经集成了npm 2.2.6.2 安装 cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org 2.2.7 cordova 2.2.7.1 版本 8.0.0 2.2.7.2 安装 npm install -g cordova 可以使用cnpm代替npm cnpm install -g cordova ionic 2.2.7.3 查看版本 cordova -v 2.2.8 ionic 2.2.8.1 版本 3.20.0 2.2.8.2 安装 npm install –g ionic 可以使用cnpm代替npm cnpm install -g cordova ionic 2.2.8.3 查看版本 ionic –v 2.2.8.4 查看信息 ionic info 3 项目 3.1 创建 3.1.1 新建 3.1.2 启动 3.1.3 打包 3.1.3.1 添加 3.1.3.2 生产release版apk(签名后安装) 3.1.3.3 生成debug版apk 3.1.4 签名 3.1.4.1 生成签名文件 keytool -genkey -v -keystore testapp.keystore -alias testapp.keystore -keyalg RSA -validity 20000 3.1.4.2 apk签名 jarsigner -verbose -keystore testapp.keystore -signedjar app-release-signed.apk app-release-unsigned.apk testapp.keystore 3.1.5 安装 安卓手机安装使用

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值