vue的html和css怎么对应,vue组件怎么引入css？两种方式介绍！

许多刚学习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微课进行学习。