a.vue基础入门项目实战——（项目初始化、修改根组件、首页页面、三要素基本搭建和json-server）实战01-CSDN博客

// Vue.use(VueResource)之后,从而在所有vue组件中使用this.$http.get/post...(.then请求完毕之后执行)


/*
export default {
	created: function() {
        // 带参数 -- this.$http.get('getList',{userId:123}).then(function(data) {
		this.$http.get('getList').then(function(data) {
			// 成功的回调
			console.log(data)
		}, function(error) {
			// 失败的回调
			console.log(error)
		})
	}, 
	......
*/

3、typicode/json-server

为了方便和后端调试，在前端设置rmokedata一个假的Restful数据，将前端所有的ajax数据放到一个文件里面

使用typicode/json-server步骤如下：

安装
npm install npm json-server --save 
-- 或者 npm install -g json-server
mokedata是适用于测试服，所以要在bulid文件夹的../build/webpack.dev.conf.js中添加
// server.js
const jsonServer = require('json-server')
const server = jsonServer.create()
const router = jsonServer.router('db.json')
const middlewares = jsonServer.defaults()

server.use(middlewares)
server.use(router)
server.listen(3000, () => {
  console.log('JSON Server is running')
})
注意db.json和index.html同级别，此时执行npm run dev发现启动成功
查看是否该项目下的json-server可用

1 如果已经配置了db.json的内容，然后在该项目（必须要有db.json文件）下执行
json-server --watch db.json
如下图所示：

则表示成功读取json信息我们就可以使用啦！！！使用json-server教程。

4、json-server文章

◆ 基础项目构建

1 创建实战项目（注意：千万不要配置语法检查）

vue init webpack my-sz-one

2 基本页面搭建如下图所示

/src/components/layout.vue（注意：scope）

<!-- layout.vue -->

<template>
	<div>
		<div class="app-header">header</div>
		<div class="app-content">content</div>
		<div class="app-footer">footer</div>
	</div>
</template>

<script>
</script>

<style scope>
</style>

/src/main.js