许多刚学习vue的小伙伴们可能会有所疑惑:整个项目都是vue文件和js文件,跟我们熟知的html与css完全不一样,那么怎么给我们写的vue组件添加一点样式呢?接下来就让小编告诉你,vue组件样式写在哪里。
首先,一个vue文件(不管是主页面还是组件)由三个标签组成,分别是,和
import Menu from "@/components/FixMenu.vue"
export default {
data () {
return {
};
},
components: {
Menu
},
computed: {},
mounted(){},
methods: {}
}
只要在
另外,在
@import "../assets/css/cropper.css";
.fix-menu-wrap {
height: 0.98rem;
margin-top: 0.1rem;
}
.fix-menu {
background: #fff;
width: 7.5rem;
height: 0.98rem;
box-shadow: 0 -0.02rem 0.1rem rgba(55, 55, 55, 0.1);
position: fixed;
left: 50%;
bottom: 0;
margin-left: -3.75rem;
a {
float: left;
width: 25%;
height: 0.98rem;
text-align: center;
font-size: 0.24rem;
color: #838a96;
}
i {
display: block;
width: 0.6rem;
height: 0.6rem;
overflow: hidden;
margin: 0 auto;
background: url("~@/assets/img/ico-menu.png") no-repeat;
background-size: 400% 200%;
}
.sort {
background-position: 33.34% 0;
}
.sift {
background-position: 66.67% 0;
}
.my {
background-position: 100% 0;
}
.on {
color: #333;
.home {
background-position: 0 100%;
}
.sort {
background-position: 33.34% 100%;
}
.sift {
background-position: 66.67% 100%;
}
.my {
background-position: 100% 100%;
}
}
}
小结
vue中可以直接将组件样式写在style中,每个组有其独立的样式,可以更好地对工程进行模块化的管理。
以上就是关于vue组件怎么引入css的全部内容,学习vue可以前往vue微课进行学习。