文档章节

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

林中漫步
 林中漫步
发布于 2017/05/03 15:48
字数 801
阅读 39
收藏 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,详细步骤参考其部署文档。

© 著作权归作者所有

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

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

车江毅
2016/01/11
627
1
将人工智能应用云开发中,“码农1号”要掀起IT界的一股浪潮

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

wx5ad006e30faa9
04/24
0
0
通过共享文件夹来进行前后端独立开发

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

前端届的科比
2015/11/18
0
0
maven+SpringMVC搭建RESTful后端服务框架

今天来尝试一下搭建基于SpringMVC的RESTful标准的后端服务。 首先,什么是MVC?M-model,模型,指业务数据层,具体一点就是业务逻辑与数据库的交互;V-view,视图,用来展示数据,传统SpringM...

灰色的风
02/18
0
0
DevOps实践-从0到1搭建敏捷团队的持续部署环境

在上一篇https://my.oschina.net/u/2562868/blog/1547275文章中,我们提到了如何搭建一个持续集成环境,接下来,我们以一个前端开发的例子,来图解如何搭建一个前端的可持续部署环境。 部署环...

thomaslwq
2017/10/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

w, vmstat, top, sar, nload命令查看系统状态信息

w/uptime 查看系统负载 cat /proc/cpuinfo 查看cpu核数 vmstat 监控系统状态,用法 vmstat 1,关键的几列: r, b, swpd, si, so, bi, bo, us, wa top 查看进程使用资源情况 top -c 显示详细的...

野雪球
28分钟前
0
0
小白创建一个spring boot项目

进入 https://start.spring.io/

lilugirl
今天
2
0
Alibaba Java诊断利器Arthas实践--使用redefine排查应用奇怪的日志来源

背景 随着应用越来越复杂,依赖越来越多,日志系统越来越混乱,有时会出现一些奇怪的日志,比如: [] [] [] No credential found 那么怎样排查这些奇怪的日志从哪里打印出来的呢?因为搞不清...

hengyunabc
今天
2
0
home hosts

home hosts lwk@qwfys:~$ cat /etc/hosts127.0.0.1 localhost127.0.1.1 qwfys192.168.56.101vm600.qwfys.com39.108.212.91alpha1.ppy.com39.108.117.122alpha2.p......

qwfys
今天
3
0
大数据教程(6.1)hadoop生态圈介绍及就业前景

1. HADOOP背景介绍 1.1、什么是HADOOP 1.HADOOP是apache旗下的一套开源软件平台 2.HADOOP提供的功能:利用服务器集群,根据用户的自定义业务逻辑,对海量数据进行分布式处理 3.HADOOP的核心组...

em_aaron
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部