文档章节

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

林中漫步
 林中漫步
发布于 2017/05/03 15:48
字数 725
阅读 35
收藏 2

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,详细步骤参考其部署文档。

© 著作权归作者所有

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

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

车江毅
2016/01/11
627
1
通过共享文件夹来进行前后端独立开发

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

前端届的科比
2015/11/18
0
0
将人工智能应用云开发中,“码农1号”要掀起IT界的一股浪潮

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

wx5ad006e30faa9
04/24
0
0
JavaScript使用DeviceOne开发实战(一) 配置和起步

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

jonh_felix
2015/12/03
455
0
这绝对是有史以来最详细的web前端学习攻略

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

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

没有更多内容

加载失败,请刷新页面

加载更多

下一页

java并发备忘

不安全的“先检查后执行”,代码形式如下: if(条件满足){ //这里容易出现线程安全问题//doSomething}else{//doOther} 读取-修改-写入 原子操作:使用CAS技术,即首先从V中读取...

Funcy1122
今天
0
0
SpringBoot2.0 停机

最近新建了个SpringBoot2.0的项目,因为原来一直使用的是传统的Tomcat部署war包的形式,所以这次SpringBoot内置Tomcat部署jar包的时候遇到了很多问题。其中一个就是因为没有外置的Tomcat容器...

Canaan_
昨天
0
1
Confluence 6 外部参考

一个外部参考的意思是任何站点链接到你 Confluence 的实例。任何时候当 Confluence 的用户单击这个外部链接的时候,Confluence 可以记录这次单击为参考。 在默认的情况下,外部链接的参考链接...

honeymose
昨天
0
0
Android中的设计模式之抽象工厂模式

参考 《设计模式解析》 第十一章 Abstract Factory模式 《设计模式:可复用面向对象软件的基础 》3.1 Abstract Factory 抽象工厂 对象创建型模式 《Android源码设计模式解析与实战》第6章 创...

newtrek
昨天
0
0
Redis | 地理空间(GEO)的一个坑

Redis的地理空间(Geo)是个好东西,轻轻松松的就可以把地图描点的问题处理了, 最近却遇到一个坑...Redis采用的Msater-Slave模式, 运用GEORADIUS在salve读取对应的数据,新增了从节点但是从不返...

云迹
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部