文档章节

前端开发的环境搭建与调试方式

林中漫步
 林中漫步
发布于 2017/05/03 15:48
字数 725
阅读 32
收藏 2
点赞 0
评论 0

1 安装node.js 及 npm

    下载 node-v6.10.2-win-x64.zip (下载地址:http://nodejs.cn/ ), 解压到 ${NODE_HOEM},设置环境变量到path。     在控制台执行命令:

 //查看node.js的版本
 node -v
 
 //查看npm的版本(npm是随node一块安装的。)
 npm -v

2 指定npm仓库

    在控制台执行命令: npm config set registry https://registry.npm.taobao.org

// 如果上面配置正确,则执行这行命令会有字符串返回
npm info underscore

或者

npm --registry https://registry.npm.taobao.org info underscore 

    常用的仓库:

       淘宝- https://registry.npm.taobao.org

3 安装webpack

    在控制台执行命令:

//全局安装
npm install -g webpack

//安装到你的项目目录
npm install --save-dev webpack

//查看webpack的版本
webpack -v

    有关webpack的使用、及工程目录结构,见:入门Webpack,看这篇就够了

4 选择IDE

    可以用subline或idea,做为前端的集成开发环境。

  • Subline Text3

  • Intellj IDEA
    只有2017.x.x或以上的版本才有可用的vue插件

5 新建项目

    新建项目,采用webpack打包,参考入门Webpack,看这篇就够了

    下载依赖包:

//进入你的工程目录
cd ${basedir}

npm install

// 如果上面报错或跑不过,则尝试先执行这行
npm config set proxy null

// 如果上面报错或跑不过,这个也可试试
npm config set strict-ssl false

6 对展现效果进行调试

     1) 开发一个页面,完成相应代码。 若采用了vue-router,还要在router.js中注册模块名称及路径;

     2) 在控制台执行命令:

//进入你的工程目录
cd ${basedir}

//编译打包、启动浏览器、加载执行(这个逻辑是由你在package.json中编写定制的)
npm start

     3) 在浏览器弹出的页面,输入刚才新开发的页面的路径,即可查看展现效果。

7 与中端接口进行联调

    比如,你刚开发完成一个查询页面,页面上的 “查询” 按钮依赖中端的api接口。 如果中端的这个api接口已开发完成,那么你可以直接调中端接口完成调试。 如果中端的这个api接口还没开发,那么你就需要一个mock服务器来模拟中端服务:

     1) 在mock server上创建你的页面所依赖接口,定义接口地址、接口参数、接口返回数据。

     2) 把你的页面对应的请求地址(中端api接口),改为mock server的接口地址。

     3) 点击“查询”,触发请求,进入调试。

8 Mock server的安装、部署

    AMP可以在中端接口未完成时,向前端提供mock 服务。下载地址:https://github.com/gomeplusFED/AMP

    AMP的安装,依赖node、npm、mongodb,详细步骤参考其部署文档。

© 著作权归作者所有

共有 人打赏支持
林中漫步
粉丝 90
博文 39
码字总数 33158
作品 0
深圳
架构师
.net erp(办公oa)开发平台架构概要说明之表单设计器

背景:搭建一个适合公司erp业务的开发平台。 架构概要图: 表单设计开发部署示例图 表单设计开发部署示例说明 1)每个开发人员可以自己部署表单设计至本地一份(当然也可以共用一套开发环境,...

车江毅 ⋅ 2016/01/11 ⋅ 1

通过共享文件夹来进行前后端独立开发

最近在快速开发一个后台系统,前端使用了bootstrap和angular搭建,后端使用Java,由于前端采用的是单页富应用的Web App的构建方式,所以不适合做JSP页面,最后采用了【前端+ajax+后台】的前后...

前端届的科比 ⋅ 2015/11/18 ⋅ 0

将人工智能应用云开发中,“码农1号”要掀起IT界的一股浪潮

随着人工智能的高速发展,随处可见识AI技术在生活中的实践。手机中的siri,家庭中的智能音箱,在医疗诊断上进行智能病例处理,以计算机视觉为核心的城市智能安防系统,以及最近热议的无人驾驶...

wx5ad006e30faa9 ⋅ 04/24 ⋅ 0

JavaScript使用DeviceOne开发实战(一) 配置和起步

2015 年 9 月 底,DeviceOne Release发布。至此,DeviceOne 基本完成了对多端的支持。基于 DeviceOne 可以: HTML5、Android、iOS、Windows 多端代码一次编写,各处复用; 实时简单部署。 本...

jonh_felix ⋅ 2015/12/03 ⋅ 0

这绝对是有史以来最详细的web前端学习攻略

  第一阶段:   HTML+CSS:   HTML进阶、CSS进阶、div+css布局、HTML+css整站开发、   JavaScript基础:   Js基础教程、js内置对象常用方法、常见DOM树操作大全、ECMAscript、DOM、...

学习web前端 ⋅ 2017/10/12 ⋅ 0

基于 Web 的团队 Go 语言 IDE--Wide

Wide 是基于 Web 的团队 Golang IDE。 在线体验:https://wide.b3log.org Wide 的由来 团队的 IDE: 安全可靠:项目源代码实时保存在服务器上,开发者的机器崩溃不会丢失任何源代码 统一环境...

88250 ⋅ 2014/09/27 ⋅ 9

AngularJS 2014-10-22

前台代码起来越多,需要用一种更高效方式整合 MVC只是手段,终极目标是模块化和复用 第一部分:快速上手 1.1 感受AngularJS的4大核心特性 1.2 搭建开发、调试、测试环境 第二部分:基本概念和...

jayronwang ⋅ 2014/10/22 ⋅ 0

试图做前后端分离项目遇到的困难

先分享两个前后端分离的技术文章。 Web应用的组件化开发 http://blog.xufei.gitpress.org/~posts/2013-11-20-Web%E5%BA%94%E7%94%A8%E7%9A%84%E7%BB%84%E4%BB%B6%E5%8C%96%E5%BC%80%E5%8F%91......

change_solider ⋅ 2014/07/29 ⋅ 7

node + express环境的搭建

项目中用到了前后分离,不利于seo收录,前端搭建一个独立的服务专门处理seo页面。 nodejs下载地址:http://www.nodejs.org/download/ 我的是win64版本,安装完成之后,准备express环境: //...

菜蚜 ⋅ 2014/11/23 ⋅ 0

如何构建自动化的前端开发流程

我们先来看下前端开发可能存在的问题: 我们有许多的第三方库的依赖需要管理; 我们有独立的前端测试需要自动运行; 我们还有很多代码需要在发布时进行打包压缩; ⋯⋯ 所以构建一个自动化的...

-鹏 ⋅ 2015/11/13 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

解决httpclient超时设置不生效的问题

最近公司有项目需要通过http调用第三方服务,且第三方服务偶有超时,故需要设置一定的超时时间防止不响应的情况出现。 初始设置如下: [java] view plain copy //超时设置 RequestConfig re...

Mr_Tea伯奕 ⋅ 5分钟前 ⋅ 0

过滤器Filter和拦截器HandlerInterceptor

过滤器 依赖于servlet容器。在实现上基于函数回调,可以对几乎所有请求进行过滤,但是缺点是一个过滤器实例只能在容器初始化时调用一次。使用过滤器的目的是用来做一些过滤操作,获取我们想要...

hutaishi ⋅ 9分钟前 ⋅ 0

Redis入门详解(转)

Redis入门详解 Redis简介 Redis安装 Redis配置 Redis数据类型 Redis功能 持久化 主从复制 事务支持 发布订阅 管道 虚拟内存 Redis性能 Redis部署 Redis应用场景 Redis总结 Redis简介: Redi...

xiaoyaoyoufang ⋅ 22分钟前 ⋅ 0

说说javascript中的那些专业名词

DOM(Document Object Model) 文档对象模型 BOM(Browser Object Model) 浏览器对象模型 ECMA(European Computer Manufacturer's Association) 欧洲计算机制造商协会 W3C(World Wide Web Conso......

hang1989 ⋅ 41分钟前 ⋅ 0

Bootstrap Wizard 多步表单控件

废话 有一块需求是 有多步表单 点击下一步时触发验证一个范围内的表单,点击上一步或取消,清空表单并返回第一步,点击最后一步提交整个表单的 就找到了这个插件,本来自己写了一个原生的 fo...

无极之岚 ⋅ 57分钟前 ⋅ 0

如何利用Spring Cloud构建起自我修复型分布式系统

利用Netflix所打造的组件及各类大家熟知的工具,我们完全可以顺利应对由微服务以及分布式计算所带来的技术挑战。 在过去一年当中,微服务已经成为软件架构领域一个炙手可热的新名词,而且我们...

harries ⋅ 今天 ⋅ 0

临近实习前的感想

再过两星期就要开始新的一段实习了,想想去年的这个时候也在实习,心中不免思绪万千,也一直想写对2017做个总结,但一直迟迟没有下笔。 2017年的春节,我就开始准备开学后找份实习。那时候就...

无精疯 ⋅ 今天 ⋅ 0

Spring AOP(面向切面编程)

Spring AOP概念: Spring AOP 可以劫持一个执行的方法,在方法执行之前或之后添加额外的功能。通常情况下,AOP把项目中需要在多处用到的功能,比如日志、安全和事物等集中到一个类中处理,而...

霍淇滨 ⋅ 今天 ⋅ 0

人工智能、机器学习、数据挖掘以及数据分析有什么联系?

人工智能是目前炙手可热的一个领域,所有的互联网公司以及各路大迦们纷纷表态人工智能将是下一个时代的革命性技术,可与互联网、移动互联网时代的变更相媲美;AlphaGo在围棋领域战胜人类最顶...

董黎明 ⋅ 今天 ⋅ 0

使用 vue-cli 搭建项目

vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,GitHub地址是:https://github.com/vuejs/vue-cli 一、 安装 node.js 首先需要安装node环境,可以直接到中...

初学者的优化 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部