第一次用webpack配置vue和element-ui的项目

项目github地址： github项目地址

项目中遇到的问题

tips:如何将github上其他人的项目在本地运行
错误提示：‘webpack-dev-server’ 不是内部或外部命令，也不是可运行的程序
npm install webpack-dev-server -g
npm install
npm run dev

关于prop的父级像子组件传值

父级页面

定义子组件
<play ref="palySong" :songInfo="palySongInfo"></play>
//其中ref是用来定义调用子组件的方法。:songInfo是作为父级传递给子组件的数据，子组件里需要用prop来接收才能完成传参的操作
import play from "../playSong/play"
//从play页面把组件拿出来
export default{
	data(){
		return{
			palySongInfo:[
				{
					id:"0",
					name:"songName",
					author:"songAuthor"
				}]
		}
	},
	methods:{
		paly(){
			this.$refs.palySong.show();//调用子组件的show方法
		}
	},
	components:{
    	play : play // 注册子页面play组件
    }
}

子组件页面 /playSong/play.vue

<template>
	<div class="playSong" v-show="isPlay" >
		<p class="songName">{{songInfo.name}}</p>
		<span class="songAuthor">{{songInfo.author}}&gt;</span>
	</div>
</template>
<script>
	export default{
		data(){
			return{
				isPlay:false
			}
		},
		methods:{
			show(){
				this.isPlay=true;//将状态改变为true。直接控制组件的显示状态	
			}	
		}，
		props:{
		//子组件接收父级页面的数据
			songInfo:{
					type:Object
				}
		}
	}
</script>

axios 传参和修改vue data数据

在vue中我们像jquery中ajax传参需要用到axios，我们需要用npm 下载axios模块。
npm install axios -s
下载完成之后需要在main.js里面引用一下
import axios from ‘axios’
Vue.prototype.$axios = axios;后面会有提及是为了解决一个bug。
在完成引用之后，就可以开始在对应的组件里面开始使用了。
我的组件页面是在 myMusic.vue

<script>
	export default{
			data(){
					return{
						selectedSongSheet: {},//需要从接口获取数据
					}
				},
				mounted(){
					//在挂载数据的时候，当我没有在main.js里面写    Vue.prototype.$axios = axios;而是直接使用，如下例1；
					//例1：
					/*axios.get('/static/json/songSheet.json')
					  .then(function (response) {
					    console.log(response);
				  	}),
				  	.catch(function (error) {
					    console.log(error);
				  	});*/
				  	//此时会有报错 "axios is not defind" 如下图 例1-1
				  	//所以我们需要在main.js里多写一行代码。不过为什么会如此还需要再探究一下。在main.js写了 Vue.prototype.$axios = axios之后，我们继续使用axios
				  	
				  	//例2：
				  	/*this.$axios.get('/static/json/songSheet.json')
					  .then(function (response) {
					    console.log(response.data.data.collectionSongsLists);
					   this.collectionSongsLists=response.data.data.collectionSongsLists;
				  	})
				  	.catch(function (error) {
					    console.log(error);
				  	});*/
				  	//在例2中,我们会发现我们能获取到json数据了，但是却一不能对vue data里面的对应对象赋值。浏览器会有提示：TypeError: Cannot set property 'collectionSongsLists' of undefined，没有找到我们要赋值的那个在data对象，这是由于我们this的指向问题。在this.$axios里面的this不是指向vue实例。我们需要修改this的指向，使用箭头函数或者在this.$axios之前定义一下this。
				  	
				  	//例3：终于成功了
				  	var that = this ,
				  	this.$axios.get('/static/json/songSheet.json')
					  .then(function (response) {
					    console.log(response.data.data.collectionSongsLists);
					   that.collectionSongsLists=response.data.data.collectionSongsLists;
				  	})
				  	.catch(function (error) {
					    console.log(error);
				  	});
				  	
				}
		}	

</script>

图：例1-1

json数据获取问题

在本地新建了几个json文件，模拟调用后台接口。在调用的时候出现了以问题。

而且打印出来的数据也不是变成了字符串格式，用JSON.parse()转格式也会出现报错。

最后发现这个问题是在json文件中，不能添加/**/或者//的注释。

关于引用自定义的js，并调用里面的函数方法。

在项目中我们使用了cookie模拟后台传递的用户id用于在多个页面调用用户信息。新建一个cookie.js文件用户存放cookie的存取方法，在写这个方法的过程中需要注意，因为我们这个js是需要在vue中引用，需要调用cookie.js中定义的存取方法，所以我们需要暴露一个方法出去供调用。

cookie.js

export let cookie={
	setCookie:function(cname,cvalue,exdays){
	    var d = new Date();
	    d.setTime(d.getTime()+(exdays*24*60*60*1000));
	    var expires = "expires="+d.toGMTString();
	    document.cookie = cname+"="+cvalue+"; "+expires;
	},
	getCookie:function(cname){
	    var name = cname + "=";
	    var ca = document.cookie.split(';');
	    for(var i=0; i<ca.length; i++) {
	        var c = ca[i].trim();
	        if (c.indexOf(name)==0) { return c.substring(name.length,c.length); }
	    }
	    return "";
	}
	/*保存cookie 模拟用户登录*/
	//初步保存一个cookie值。模拟缓存的用户信息
}

我们在页面调用之后就可以用 cookie.setCookie()来调用了。
在vue组件页面我们用require调用。

<script>
	let cookie = require("../../../static/js/cookie.js");
	cookie.cookie.setCookie("userId",0);//存cookie
	cookie.cookie.getCookie("userId");//取cookie
</script>

到此，我们引用就已经完成了。

关于子路由

在页面中我们包含三个选项卡，选项卡中内容较为复杂。所以采取了子路由的方式来做


about(关于我)，dynamic（动态），userSongs（音乐）。这三个页面作为user页面的选项卡的内容。我们需要在user页面（父页面）里面加入。用来接收子路由组件的东西。
我们还需要在index.js里面修改vue页面的路由配置

配置子路由

在children中，配置的第一个path:’’，配置的是默认选项卡展示的内容，我们这里默认展示的模块是userSong。

el-row上绑定的事件的失效

我们在项目中当使用element-ui和vue的时候，常使用element-ui的组件和vue的路由。但是在使用的时候还是需要注意到一些小坑，我稍微总结一下我所遇到的小坑：
1，el-row ，在使用el-row ，el-col 的时候，如果我们将事件绑定在el-row上面的时候，会发现我们定义的事件失效了。而且注意的是在el-row和el-col之间我们应该尽量避免插入其他标签。我们为保证事件的有效，可以在el-row外用一个div容器包裹。