1.新建一个vue项目
同时安装axios和protobufjs
2.在src目录下新建一个proto目录,用来存放’.proto文件’,拷入protoWenj
3.将.*proto文件生成src/proto/proto.js
npx pbjs -t json-module -w commonjs -o src/proto/proto.js src/proto/*.proto
可以发现,这个模块在原型链上定义了load, lookup等非常有用的api,这正是后面我们将会用到的。 为以后方便使用,我们将命令添加到
package.json的script中:
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"proto": "pbjs -t json-module -w commonjs -o src/proto/proto.js src/proto/*.proto"
},
以后更新proto文件后,只需要npm run proto即可重新生成最新的proto.js
4.封装request.js
qs可通过npm install qs命令进行安装,是一个npm仓库所管理的包。而qs.stringify()将对象 序列化成URL的形式,以&进行拼接。
JSON是正常类型的JSON,请对比一下输出.
var a = {name:‘hehe’,age:10};
qs.stringify(a)
// ‘name=hehe&age=10’
JSON.stringify(a)
// ‘{“name”:“hehe”,“age”:10}’