Vue+Koa2移动电商实战 （一）前端环境搭建

实战 （一）前端环境搭建"/>

Vue+Koa2移动电商实战 （一）前端环境搭建

Vue+Koa2移动电商实战 （一）前端环境搭建

这是我的第一套实战系列博客，希望有更多的小伙伴儿能看到，也给自己个动力写完这个系列的博文，大家共同学习共同进步。

这套博文全面的讲解了vue+koa的实战项目。涉及的技术：vue+Router+vant+Node+Mongodb

本套博文将从零开始搭建一个移动电商系统，包括首页展示/类别展示/购物功能/注册登陆/积分系统/查找页面/后台接口设置

这个项目呢，我也是从零开始搭建，如果在这个过程中有小伙伴儿发现了花生的一些不对的地方，希望能多多指出来，也希望看到这个系列的小伙伴儿能有所收获。

今天我们就开始做前端环境的搭建

我的项目创建是在我电脑的D盘，小伙伴儿们可以在自己电脑随便哪个地方创建都行的

mkdir smilecd smile

全局安装vue-cli：npm install vue-cli -g

然后输入 vue init webpack 来初始化我们的项目

等待安装完成后我们可以使用 npm run dev 来检测我们的项目是否初始化成功
在浏览器中输入 http://localhost:8080/#/ 进行测试

安装vant UI模块

npm install vant --save

如果网速比较慢的话可以采用淘宝源的安装方式，个人不建议使用cnpm，容易出现一些莫名其妙的bug

npm install vant --save --registry=

引入vant

vant是支持babel-plugin-import引入的，它可以让我们按需引入组件模块，并且不用管理我们的样式，现在Vue项目组件库的主流引入方法。 安装babel-plugin-import

npm install babel-plugin-import --save-dev

在babelrc中配置plugin

"plugins": [
"transform-vue-jsx",
"transform-runtime",
["import",{"libraryName":"vant","style":true}]
]

配置好了在main.js中按需引入自己需要的vant组件模块

vant官方链接不懂请先阅读文档以便自己在开发过程中使用

移动端开发过程中不再使用px

在index.html中使用一下js

  let htmlwidth = document.documentElement.clientWidth || document.body.clientWidth; //获取到屏幕的宽度//获取最外层的dom元素let htmlDom = document.getElementsByTagName('html')[0];htmlDom.style.fontSize = htmlwidth / 20 + 'px'; //1rm=16px   这里的换算是按照苹果5的比列进行换算的console.log(htmlwidth)

用于移动端适配

总结：今天我们主要使用了vue-cli来创建我们的前端目录，还是很简单的，如果有不熟悉的小伙伴儿可以去查阅下官网文档