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

最新推荐文章于 2023-11-06 18:47:28 发布

weixin_34071713

最新推荐文章于 2023-11-06 18:47:28 发布

阅读量178

点赞数

文章标签：前端 webpack 开发工具 ViewUI

原文链接：https://my.oschina.net/HuQingmiao/blog/891374

版权

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

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

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

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

或者

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

在控制台执行命令：

//全局安装
npm install -g webpack

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

//查看webpack的版本
webpack -v

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

在控制台执行命令：

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

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

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

var gulp = require('gulp');

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

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

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

下载依赖包：

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

npm install

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

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

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

2) 在控制台执行命令：

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

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

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

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

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

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

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

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

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

转载于:https://my.oschina.net/HuQingmiao/blog/891374

关注