首次使用VUE搭建简单项目问题汇总

* 以下内容为学习VUE全家桶时遇到的问题整理，学习中复现的网站为‘卖座电影’移动端，问题的顺序不是线性的，只是起思路整理和提醒的作用，许多具体问题还要配合文档观看。*

1. *跨域请求问题：*

跨域请求问题的解决方案主要有三种，JSONP、cors方法和服务代理（反向代理），目前JSONP使用较少，这里详细说一下cors方法和服务代理。

Cors方法：在服务端设置响应头”Access-Control-Allow-Origin:”这样所有人都可以向该服务器请求数据，通配符也可以替换成后端允许请求的域名。（当且仅当使用POST向PHP发送请求时，还需要在添加请求头）

服务代理（反向代理）：由于服务端与服务端的数据请求不存在跨域问题，因此可以通过客户端建立同域的服务端，与目标服务端完成数据请求，再返回给客户端，这种方法很适合用在开发调试阶段。

例如当我们需要向’https//m.maoyan.com/ajax/mostexpected?aaa’请求数据时，需要先在package.json的同级目录下（也就是项目最外层）新建Vue.config.js文件，并使用以下方法：

module.exports={
   
	devServer:{
   
		proxy:{
   
			'/ajax':{
   
				target:'https//m.maoyan.com',
				ws:true,
			changeOrigin:true
			}
		}
	}
}

这是最基本的使用get请求的写法，如果是POST方法，还需要在这里添加header对象，将所需数据模拟发送，也可以在使用axios的位置使用其完整写法：

axios（{
   
	url：'https://.....'
	headers:{
    
	}
}）.then(res=>{
   
console.log(res.data)
})

2. *Json-server的使用*

​ 在工作中，不可能等后端将所有数据弄好再进行页面的测试，因此我们需要使用一些将json数据自动处理的插件，json-server是比较优秀的一款。

​ 具体安装方法见文档，他可以自动将数据分割，还有模拟懒加载，分段请求数据等功能，想要启动服务器，只需要在json文件所在文件夹使用命令管理器：

json-server --watch 文件名.json

​ 随着学习的深入，会更多的使用他的方法。

3. *路由容器与路由配置中的一些问题*

在路由配置文件中，Vue.use(VueRouter) 代表了注册路由插件，将router-view 定义成全局组件，这样就可以直接在页面中添加router-view标签，无需引入。

Vue内的路由有两种模式，history和hash模式，在配置文件中可以更改。这两种模式最直观的不同在于history模式在域名中不会出现”#”。但其实这是两种基于不同原理的模式ÿ