Vue.js+Koa2移动电商实战-1

Posted 小凡的耿

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue.js+Koa2移动电商实战-1相关的知识,希望对你有一定的参考价值。

前端环境的搭建

 前端开发环境搭建

  采用前后端分离的开发模式,也就是前端调用后端提供的JSON接口,让Vue和Koa2的代码没有任何的耦合。所以开发环境也是完全分离的,开发完成后你甚至可以分别部署到两个服务器上来进行运行。

  1.建立前端文件夹

mkdir SmileVue

  2.使用vue-cli生成项目目录

    使用vue-cli非常方便快速,它可以为我们生成基本的Vue的项目结构。

  •   检测npm版本,在终端输入 npm -v,尽量使用5.x以上版本。
  •   全局安装vue-cli,在终端里输入,npm install vue-cli -g
  •   在终端中输入 vue init webpack

  等到上面这些都正确安装完成后,我们需要验证一下,我们安装是否成功。

  3.测试环境是否安装成功

  • 使用npm run dev 进行测试环境的打开。
  • 在浏览器中输入 http://localhost:8080 进行测试。

  在浏览器中打开页面,出现Vue的正常页面时,说明你的项目已经初始化成功了。下节课我们就可以愉快的进行编程了。

  一个README.md的重要性

  在一个实际项目中,特别是开源项目中是非常重要的。
  所以我们要建立一个README.md文件,这个就是你项目的说明文件。




以上是关于Vue.js+Koa2移动电商实战-1的主要内容,如果未能解决你的问题,请参考以下文章

Vue.js+Koa2移动电商实战4

Vue.js+Koa2移动电商实战2

Vue.js+Koa2移动电商实战3

Vue+Koa2移动电商实战 密码加密

Vue+Koa2移动电商实战 mock数据使用和布局

Vue+Koa2移动电商实战 使用vue-awesome-swiper 制作商品推荐栏