最近在研究使用zebrajs框架,用vscode编辑器进行开发。vsc这个编辑器说起来还是很强大的,就是支持各种系统的多种语言开发。用于前端的话可以直接在编辑器上边调试javascript,就是需要nodejs的环境。这个编辑器不像大多数的编辑器一样可以直接写完页面然后在浏览器上边运行进行普通调试。在使用vsc的时候要是进行调试的时候你要先安装node的环境,然后进行node debugg。本人使用的是mac系统,这个系统是最近才开始使用的,还不是很熟悉各种终端命令之类的。为了配置这一个环境花费了很久的时间。下边就说说怎么配置这个环境吧。

一:安装

首先

  1.安装vsc的编辑器。输入https://code.visualstudio.com/网址,打开之后直接点击Download for Mac,直接就能下载下来免安装版本的。

  2.安装vsc所用的插件。可通过搜索https://marketplace.visualstudio.com/vscode查找所需要的插件

然后就是环境的配置了。

  首先安装node。在终端使用命令行进行安装。

    1.ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"  (下载Homebrew)

    2.brew update  (更新brew)

    3.brew doctor  (检查brew)

    4.export PATH="/usr/local/bin:$PATH"   (将brew的位置添加到$PATH环境变量中)

    5.  1.brew link node  (如果之前安装node使用此命令行给两个node连接)

         2.brew uninstall node  (卸载node)

         3.brew install node  (安装node)

    6.node -v   (检测node的版本,看是否安装成功)  npm -v  (检测npm的版本,看是否安装成功)

    7.安装成功之后在所要写的项目的根目录下边创建package.json文件

  最后,安装zebra.js的要求安装gulp。网址为:http://www.gulpjs.com.cn/

    1.全局安装 gulp:$ npm install --global gulp

    2.作为项目的开发依赖(devDependencies)安装:$ npm install --save-dev gulp

    3.在项目根目录下创建一个名为 gulpfile.js 的文件:

        var gulp = require('gulp');

        gulp.task('default', function() {

           // 将你的默认的任务代码放在这

        });

    4.运行 gulp:$ gulp

二:zebra.js项目的运行命令:进入项目之后运行一下命令

  1.npm install

  2.gulp

  3.gulp runtime

  4.gulp http   (运行完之后可以直接在浏览器打开终端上边提示的网址,就能看到项目了)

  总的步骤可以搜索https://github.com/barmalei/zebkit看到

使用vscode软件运行zebrajs框架小结的更多相关文章

  1. 那些年读过的书《Java并发编程实战》和《Java并发编程的艺术》三、任务执行框架—Executor框架小结

    <Java并发编程实战>和<Java并发编程的艺术>           Executor框架小结 1.在线程中如何执行任务 (1)任务执行目标: 在正常负载情况下,服务器应用 ...

  2. 如何安装Vscode软件及设置成中文界面?

    最新小编开始研究前端,想写点东东玩,要想开始首先就要安装工具,写前端有好几个工具,安装推荐开源的vscode,第一次安装是英文版的,如何修改成中文版,也是很简单的,跟随小编一起来安装设置工具吧. 方法 ...

  3. Oracle DBA的神器: PRM恢复工具,可脱离Oracle软件运行,直接读取Oracle数据文件中的数据

    Oracle DBA的神器: PRM恢复工具,可脱离Oracle软件运行,直接读取Oracle数据文件中的数据 PRM 全称为ParnassusData Recovery Manager ,由 诗檀软 ...

  4. 【转】vscode调试运行c#详细操作过程

    [转]vscode调试运行c#详细操作过程 主要命令: //路径跳转cd //新建项目dotnet new console -o 路径 //运行dotnet run //用于发布exe<Runt ...

  5. vscode下运行matlab记录

    Linux下安装MATLAB可参照以下链接: https://blog.csdn.net/qq_31285709/article/details/82083902 在vscode 中运行.m文件. 首 ...

  6. Win10如何禁止软件运行?win10禁止软件启动的设置方法!禁止人生日历热点快讯的方法

    相信不少使用Win10系统的用户遇到过下载了一款软件进行安装后后续会有接连不断的程序安装到电脑中.他可能似乎一个大家常用的程序,在我们安装好运行的时候会通过后台偷偷下载其他应用安装到我们电脑中,导致系 ...

  7. atitit.软件开发--socket框架选型--netty vs mina j

    atitit.软件开发--socket框架选型--netty vs mina j . Netty是由JBOSS提供的一个java开源框架 Apache mina 三.文档比较 mina文档多,,, 好 ...

  8. 关于delphi软件运行出现Invalid floating point operation的错误的解决办法

    关于delphi软件运行出现Invalid floating point operation的错误的解决办法   关于delphi软件运行出现Invalid floating point operat ...

  9. JAVA 基础开发环境 vscode 搭建 Windows下VSCode编译运行简单java

    JAVA 基础开发环境 vscode 搭建 来源 https://www.cnblogs.com/freewsf/p/7744728.html 对于使用 Visual Studio Code 的 Ja ...

随机推荐

  1. vue 里面输出带标签的html

    使用 v-html 指令 <div v-html="'<P>11111111</P><P>11111111</P>'"> ...

  2. android自动化测试之uiautomator

    1.通过monkeyrunner.bat   monkey_record.py启动MonkeyRecorder进行拿到各个控件的坐标(要连上手机才可以启动) 2.也可以通过uiautomatorvie ...

  3. bzoj3832

    拓扑排序+set 如果我们直接记录所有路径是不行的,那么我们要降低路径的数量,于是我们把最短路径转换到边上,这样我们就只有m条路径了. 先计算出f[i]和g[i]表示正反拓扑最长链,把所有g插到set ...

  4. 关于checkbox对应一张表时如何遍历

    html代码: <table> <tr> <td><input name='one' type='checkbox' value='1'/></t ...

  5. ubuntu系统下挂载新的硬盘

    参考 http://zwkufo.blog.163.com/blog/static/258825120141283942244/     http://blog.csdn.net/caicai2526 ...

  6. Asset Catalog Help (三)---Adding Image Sets

    Adding Image Sets Organize versions of your images in image sets, which you can add to an asset cata ...

  7. Qt Creator Theme FlatDark 配色

    1.预处理指令,宏定义 颜色 #FF6AAD 2.普通代码 颜色 #D6CF9A 3.头文件 #D69545 4.系统限定符(namespace, class, public, typedef等)  ...

  8. 1.6 Hive配置metastore

    一.配置 1.配置文件 #创建配置文件 [root@hadoop-senior ~]# cd /opt/modules/hive-0.13.1/conf/ [root@hadoop-senior co ...

  9. shell脚本自动部署nignx反向代理及web服务器,共享存储

    #!/bin/bash systemctl status nginx var=$? ] then yum install epel-release -y ] then echo "epel库 ...

  10. UVa 1627 Team them up! (01背包+二分图)

    题意:给n个分成两个组,保证每个组的人都相互认识,并且两组人数相差最少,给出一种方案. 析:首先我们可以知道如果某两个人不认识,那么他们肯定在不同的分组中,所以我们可以根据这个结论构造成一个图,如果两 ...