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

项目github地址： github项目地址

项目中遇到的问题

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

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

父级页面

定义子组件

//其中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

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

图：例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

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

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

关于子路由

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


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容器包裹。