Vue.js+Koa2移动电商 笔记

一、搭建项目架构：

项目采用Webpack+Vue-router的架构方式，开始安装（基于windows系统）

1.按Win+R，然后在文本框中输入cmd，回车打开命令行，输入vue-cli安装命令：

npm install vue-cli -g

这里的-g代表全局安装。

2.在命令行中初始化项目，我们采用的是webpack模板，输入初始化命令：

vue init webpack MobileEcommerce

这里的MobileEcommerce是我的项目文件夹名称，你可以起一个自己喜欢的名称。安装时根据项目需要配置所需要的模块。这里有一个小技巧，就是在你已经提前建立好了文件夹的时候，我们也进入了文件夹，这时候我们可以省略这个文件夹名称。如下情况：

mikdir MobileEcommerce
cd MobileEcommerce
vue init webpack

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

使用如下指令 进行测试环境的打开：

npm run dev

在浏览器中输入 http://localhost:8080 进行测试。

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

二、Vant的引入

1.安装Vant

安装指令（简写形式）

npm i vant -S

完整写法为：

npm install vant --save

2.优雅的引入Vant

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

npm i babel-plugin-import -D

完整写法为：

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

3.在.babelrc中配置plugins（插件）

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

4.按需使用Vant组件

我们设置好.babelrc后，就可以按需引入Vant框架了。比如现在我们引入一个Button组件. 在src/main.js里加入下面的代码：

import { Button } from 'vant'
Vue.use(Button)

有了这段代码之后，我们就可以在需要的组件页面中加入Button了.

<van-button type="primary">主要按钮</van-button>

三、自己mokr数据

https://www.easy-mock.com