文档章节

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

林中漫步
 林中漫步
发布于 2017/05/03 15:48
字数 801
阅读 40
收藏 0

1 安装node.js 及 npm

    下载 node-v10.11.0-x64.msi (下载地址:http://nodejs.cn/ ),在控制台执行命令:

 //查看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 

3 安装webpack

    在控制台执行命令:

//全局安装
npm install -g webpack

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

//查看webpack的版本
webpack -v

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

4 安装gulp(如果用到gulp, 则安装)

    在控制台执行命令:

//全局安装
npm install --global gulp

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

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

var gulp = require('gulp');

gulp.task('default', function() {
  // 将你的默认的任务代码放在这
});

5 选择IDE

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

  • Subline Text3

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

6 新建项目

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

    下载依赖包:

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

npm install

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

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

7 对展现效果进行调试

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

     2) 在控制台执行命令:

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

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

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

8 与中端接口进行联调

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

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

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

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

9 Mock server的安装、部署

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

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

© 著作权归作者所有

共有 人打赏支持
林中漫步
粉丝 97
博文 55
码字总数 33323
作品 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
481
0
基于 Web 的团队 Go 语言 IDE--Wide

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

88250
2014/09/27
17.9K
9

没有更多内容

加载失败,请刷新页面

加载更多

oh-my-zsh 自定义

GitHub 地址 基于 oh-my-zsh 的自定义配置,增加了一些个人常用插件与皮肤。 采用的是 git submodule 来维护,包括 oh-my-zsh,之所以这么搞,主要是手头有多台 linux 需要维护, 每台机器、...

郁也风
今天
4
0
Docker安装踩坑:E_FAIL 0x80004005的解决

参考 菜鸟教程--Windows Docker 安装 http://www.runoob.com/docker/windows-docker-install.html 官方文档-Install Docker Toolbox on Windows https://docs.docker.com/toolbox/toolbox_in......

karma123
今天
4
0
js垃圾回收机制和引起内存泄漏的操作

JS的垃圾回收机制了解吗? Js具有自动垃圾回收机制。垃圾收集器会按照固定的时间间隔周期性的执行。 JS中最常见的垃圾回收方式是标记清除。 工作原理:是当变量进入环境时,将这个变量标记为“...

Jack088
昨天
17
0
大数据教程(10.1)倒排索引建立

前面博主介绍了sql中join功能的大数据实现,本节将继续为小伙伴们分享倒排索引的建立。 一、需求 在很多项目中,我们需要对我们的文档建立索引(如:论坛帖子);我们需要记录某个词在各个文...

em_aaron
昨天
27
0
"errcode": 41001, "errmsg": "access_token missing hint: [w.ILza05728877!]"

Postman获取微信小程序码的时候报错, errcode: 41001, errmsg: access_token missing hint 查看小程序开发api指南,原来access_token是直接当作parameter的(写在url之后),scene参数一定要...

两广总督bogang
昨天
31
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部