vue安装一个项目

1、vue init webpack vueproject（vue项目名）

2、安装依赖包

cd vueproject 

npm install

npm run dev

3、如何将页面上的px,自动转化为rem

指令：cnpm install px2rem-loader

在generateLoader函数上一行加上如下一段话

  var px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 50
    }
  };

在generateLoader函数内第一行修改成如下

const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader,px2remLoader]

此时

页面上

.detail-page {
	width: 20px;
	height: 40px; /*no*/
}

此时width解析成了rem格式。height未解析的原因是在其后增加了/*no*/

4、关于插槽。（组件复用）

首先我在header文件夹下定义一个公共的组件 index.vue

<template>
	<div class="c-header">
		<ul class="header-ul">
			...
		</ul>
	</div>
</template>
<style scoped>
	
</style>

主页面引用这个组件，在js中声明这个组件，在页面上引用这个组件。

<template>
	<div class="home-page">
		<v-header></v-header>
	</div>
</template>
<script>
	import Header from "@/components/header/"
	export default {
		components: {
			'v-header': Header
		}
	}
</script>

5、display:inline-block 带来的影响可以在父容器上增加 font-size:0 可以去除影响。

6、v-for指令的应用，这里值得学习的是

原来的写法

<img src="../assets/webservice.png" alt="">

后来的写法

import webservice from "@/assets/webservice.png"

<img :src="item.imgUrl" />

this.arrList = [{
				imgUrl : webservice,
				name: '前端开发'
			}];

 :src="xxx..." 完整代码

<template>
	<div class="home-page">
		<v-header></v-header>

		<ul class="nav">
			<li v-for="item in arrList">
				<img :src="item.imgUrl" />
				<span>{{item.name}}</span>
			</li>
		</ul>

	</div>
</template>
<script>
	import Header from "@/components/header/"
	import webImg from "@/assets/web.png"
	import move from "@/assets/move.png"
	import data from "@/assets/data.png"
	import bigdata from "@/assets/bigdata.png"

	export default{
		data(){
			return{
				arrList:[]
			}
		},
		mounted(){
			this.arrList = [{
				imgUrl : webImg,
				name: '前端开发'
			},{
				imgUrl : move,
				name: '后端开发'
			},{
				imgUrl : data,
				name: '数据库'
			},{
				imgUrl : bigdata,
				name: '云计算'
			}];

		},
		components:{
			'v-header': Header
		}
	}
</script>
<style scoped>
	.home-page .nav{
		height: 100px;
		padding-top: 44px;
		background: #F3F5F7;
		overflow-x: scroll;
		white-space: nowrap;
		font-size: 0;
	}
	.nav li{
		width: 88px;
		display: inline-block;
		text-align: center;
		font-size: 14px;
	}
	.nav li img{
		display: block;
		width: 32px;
		margin: 20px auto 12px;
	}
</style>

7、<router-link>类似于a标签，点击可进行页面跳转。

<router-link to="" ></router-link>

8、对一个数据里含有html语法的，可用v-html绑定。