vue+ssr 项目踩坑...

记录一些在项目过程中遇到的问题以及解决办法

1.组件开发
对于可重复复用的样式或结构，直接开发成对应的component，在vue组件中直接引用
例如：header部分
创建组件：
1）可在项目目录中新建一个components目录，用来存放各个公用的组件

2）新建一个header.vue文件（注：vue项目中所有的组件都是.vue结尾的文件）
包含三部分：

<template>
	//用来布局,相当于html  注意：template中只可以有一个根节点
</template>

<script>
	//用来写业务逻辑以及初始化一些变量等
	export dafualt {
		name: "Header", //该组件名字
		data () {
			return {
			 	***
			}
		},
		methods: {
			***function***
		}，
		computed: {
			***
		},
		created () {
			***
		}
	}
</script>

<style lang="stylus" scoped>
		//scoped 表示改样式作用域——即只在该vue文件中生效
</style>

3）组件创建之后，需要在引用的父组件中引入该子组件，并注册

<script>
import HomeHeader from './components/Header'   //文件后缀可省略，vue机制会优先查找.vue结尾的文件

export default {
		name: 'Home',
		components :{  //注册
				HomeHeader
	}

}
</script>

4）然后就可以在已经注册子组件的父组件中使用子组件，使用方法如下：

<template>
<div>
<home-header></home-header>    //注意：标签的命名自动改变
</div>
</template>

5）以上就是创建component并在父组件使用的方法

2.第一次使用H5的video标签时，编译loader报错
原因：未在webpack的配置文件(如：webpack.base.config.js)中，给.video结尾的文件指定相应的loader
代码：

{
	text: /\.(mp4|ogg|webm|mp3|wav|flac|aac)(\?.*)?$/,   //以*结尾的文件
	loader: 'url-loader',     //指定loader
	options: {
		limit:1000,
		name: "voice/[name].[hash:6].[ext]"
	}
}

3.直接在vue组件中引用静态资源（如图片资源）时，找不到路径报错
场景：非直接引用，定义在list中时 如：

imgList: [
		{
			id: "01",
			imgUrl: "../assets/1.jpg"
		},
		{
			id: "02",
			imgUrl: "../assets/2.jpg"
		}
]

解决方法：
1）先通过import引入，使用时直接引用img1和img2

import img1 from '../assets/1.jpg'
import img2 from '../assets/2.jpg'

2）在src同级目录下，新建一个static目录，用于存放静态资源，再通过相对路径读取static目录下的资源（有待验证…）

4.在vue组件中引用MP4格式的文件，路径没问题，但页面无法展示该video
场景：非直接引用，通过接口返回动态绑定
原始代码：

<video  controls = "controls">
	<source :src="videoUrl" type="video/mp4">
</video>

this.videoUrl = res.data.videoUrl

解决方法： 给video标签绑定ref属性

<video ref="video" controls = "controls">
	<source src="" type="video/mp4">
</video>

然后在逻辑代码里动态绑定src路径

this.$refs.video.src = res.data.videoUrl

问题解决

5.关于组件间传值

6.引用插件（轮播图等）

7.引用外部css文件

8.创建全局css样式的function 到处引用

9.前端开发如何自己启动服务器（未完待续…）
1）首先在src同级目录新建server文件夹，同时新建index.js文件 设置本地服务器地址/api目录用于放置json文件/static文件夹用于存放静态资源

var server = app.listen(3000,function(){
		console.log('listening at port 3000')
})

2）配置完成后，在项目目录文件执行 node server/index.js 然后打开 http://localhost:3000/static/video01.mp4 查看服务器是否启动成功（video01提前放在static目录下）

3）启动成功之后，就可以自己