data.json

{ "userData": { "id": 1, "openid": "oC_mwjjqkqwsjm9Yvoq-Zk06Nntsws", "nickname": "曾田生", "sex": 1, "language": "zh_CN", "city": "Zhangzhou", "province": "Fujian", "country": "China", "headimgurl": "", "privilege": "", "unionid": "oEexiuGFcp_4a1oPSsKLkMS938Tlg", "goTo": "23,43,12,34,34", "wantTo": "34", "createTime": 1483002136000 } }

当咱们执行 npm run dev 的时候会执行项目 build 目录下的 dev-server.js 的这个 server文件 ，

咱们就在这个文件里头配置一些路由，模拟一些供页面访问的接口。

往 dev-server.js 脚本插入如下代码， 模拟监听来自 客户端的请求

var express = require('express') var bodyParser = require('body-parser'); var app = express(); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: false })); // 获取模拟数据 var appData = require('../data.json'); var userData = appData.userData; // get请求 app.get('/process_get', function (req, res) { // 输出 JSON 格式 var response = { err:0, data:userData }; res.end(JSON.stringify(response)); }) // post 请求 app.post('/getUserData', function (req,res) { var response = { err:0, data:userData }; res.end(JSON.stringify(response)); });

在客户端组件里发起请求：

<template> <div id="appVue"> <div class='ddiv' @click="divClick" ></div> <page1 v-on:page-to-appvue='listenChild' ref="page1" :infodata="infodata"></page1> </div> </template> <script type="text/ecmascript-6"> import VueResource from 'vue-resource'; // 全局注册 ，将组件添加到 vue 里面 Vue.use(VueResource); import page1 from './components/page1/page1'; export default { name: 'appVue', data(){ return { infodata:{ ‘name’:’曾田生’， ‘age’:'24' } } }, created(){ // 客户端 post 请求 this.$http.post('/getUserData', {'openid': urlFrom.openid}).then((response) => { var resData = JSON.parse(response.body); if (resData.err === 0) { // 请求成功，返回数据 } else { console.log('---------ERR-----------'); } }); // 客户端 get 请求 this.$http.get('/getUserData').then((response) => { response = response.body; } }); } methods:{ listenChild: function (msg) { console.log('监听子组件传递过来的数据'+msg+‘并触发改方法的执行’ ); }， divClick:function(){ //调用子组件 page1 的 handleParentClick 方法 this.$refs.page1.handleParentClick(); } }, components: { page1 } } </script> <style lang="scss"> </style> 2、线上发布项目的的调试

这里我用的是 node.js 来做后端开发 ，在项目的根目录建个 server.js 文件 ：

var express = require('express'); var app = express(); var routar = express.Router(); // get请求 routar.get('/getUserData', function (req, res) { // 输出 JSON 格式 var response = { err:0, data:userData }; res.end(JSON.stringify(response)); }) // post 请求 routar.post('/getUserData', function (req,res) { var response = { err:0, data:userData }; res.end(JSON.stringify(response)); }); app.use(routar); var server = app.listen(8888, function () { var host = server.address().address; var port = server.address().port; console.log("应用实例，访问地址为 %s:%s", host, port) })

npm run build 咱们的项目 ，会打包编译完 .vue 文件 ，在项目的跟目录下回生成 dist 文件夹 ，里面的

资源就是咱们要发布到线上的脚步和网页文件。

执行 node server.js 即可启动该执行文件，至此，前后端项目都编译启动完成，可以做线上调试了。

总结

本篇稍微讲了一下利用 vue-cli 脚手架进行前端项目开发的大概流程，知识点讲的有粗有细，大家可以对大体流程有所了解，对细节知识点不妨去 google 百度 深入学习。

分享给小伙伴们：

本文标签： Vue.js/">Vue.js

相关文章

发表评论愿您的每句评论，都能给大家的生活添色彩，带来共鸣，带来思索，带来快乐。

本类最热新闻