前端开发的环境搭建与调试方式
前端开发的环境搭建与调试方式
林中漫步 发表于7个月前
前端开发的环境搭建与调试方式
  • 发表于 7个月前
  • 阅读 20
  • 收藏 2
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

摘要: 这里的前端,是指由html、js等静态代码组成的部署在 nginx或 tegine上的一层代码, 是相对中端、后端而言的。

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

共有 人打赏支持
粉丝 84
博文 40
码字总数 33112
×
林中漫步
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: