一、创建项目
使用vue开发项目时，通过脚手架工具vue-cli可以很方便的构建项目，热重载、保存时静态检查以及可用于生产环境的构建配置都一并创建好。
# 全局安装 vue-cli
$ npm install -g vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖
$ cd my-project
$ npm install
更具体的可以看官方文档：http://cn.vuejs.org/v2/guide/installation.html
二、安装网络请求模块
vue2.0后官方不再推荐vue-resource 作为 ajax 方案。(具体原因看这:https://github.com/vuefe/vuefe.github.io/issues/186)
在这里使用axios处理ajax请求，对应的vue插件:vue-axios
# 安装 axios 和 vue-axios
$ npm install --save axios vue-axios
# 在main.js中引入
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
# 在组件中使用axios
this.axios.get('/api/user').then((response) => {
console.log(response.data)
}).catch((error) => {
console.error(error)
})
axios更详细的使用方法看这里:https://github.com/mzabriskie/axios
三、Json-Server
项目搭建好了，需要本地模拟数据来测试接口效果。
这里的思路是启动一个本地Server来处理请求返回模拟数据，项目中通过webpack的proxy代理过去。
这里使用Json-Server这个工具来构建本地Server
# 安装Json-Server
$ npm install -g json-server
安装完成后，在项目中创建db.json文件模拟返回的数据内容。
{
"user": {
"name" : "Sugar",
"age" : 22,
"sex" : "girl"
}
}
然后执行 json-server db.json
执行结果
执行成功后会提示已经启动了一个端口为3000的服务，在浏览器中输入localhost:3000 能看到如下的页面：
localhost:3000
点击 'user' 就能看到我们定义的数据信息
user 接口
到此，本地Mock Server 已经搭建完成
四、向本地Server请求数据
在项目中如何向本地Server请求数据呢？
通过webpack的proxy，可以将本地的Ajax请求代理到Mock Server上
在config/index.js文件中加入如下配置
proxy配置
配置完成启动 npm run dev 进行测试吧。
更多proxy配置信息，请参考以下相关资料：
https://vuejs-templates.github.io/webpack/proxy.html
http://webpack.github.io/docs/webpack-dev-server.html#proxy
五、使用Mock.js
Mock Server中 db.json 中的数据是是死的，我们可以借助 Mock.js 生成动态数据，增加测试的真实性。
# 安装mock.js
npm install mockjs --save-dev
项目中创建mock/ db.js 文件，内容如下：
db.js
执行 json-server db.js 再次查看 localhost:3000/user 已经能看到数据效果了
localhost:3000/user
Mock.js的详细用法参考：http://mockjs.com/examples.html
六、整合
项目开发时，分别要输入两条命令比较麻烦。
我们在package.json中配置一条mockdev命令 ，以方便开发。
在 scripts 里加入如下两条配置：
"mock": "node_modules/.bin/json-server --watch mock/db.js --port 3000",
"mockdev": "npm run mock & npm run dev"
到此 vue + axios + mock server的环境已经搭建完成。
网友评论