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绑定。