组件使用less和scoped
Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。
Less 可以运行在 Node 或浏览器端。
安装less
npm install less less-loader -D安装完毕后，就可以在标签上加上lang属性来使用less了
<style lang="less"></style>scoped的作用
scoped实现组件的私有化, 当前style属性只属于当前模块
讲人话就是scoped修饰的style只能在当前文件生效
由于vue是模块化的，难免会出现一样的属性，scoped就是用于规避这个问题
在DOM结构中可以发现,vue通过在DOM结构以及css样式上加了唯一标记,达到样式私有化,不污染全局的作用
vue中使用less
安装完less后，可以开始尝试使用less
要搭建一个如下图的demo，左边是菜单栏，上面是导航栏，剩下的那一部分是内容栏
在src文件夹下创建一个新的文件夹layout
由于我们要分为三个部分，所以在layout下分别再创建三个文件夹Menu Header Content，每个文件夹下都有个组件index.vue
最后要把三个组件拼装起来，还需要在layout下新建一个index.vue来整合所有组件
最后在App.vue中引入layout/index.vue模块
这时不同组件的内容就被渲染到页面了
此时的主页会存在页面不是百分百显示或存在其他残留样式的情况，需要我们手动清空
可以采用下面的css清空代码
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}这里我将reset文件放在了静态资源文件夹assets下的css文件夹
还需要我们去main.ts引入一下这个样式
import './assets/css/reset.less'代码演示
<!-- ./layout/index.vue -->
<template>
<div class="layout">
<Menu/>
<div class="layout-right">
<Header/>
<Content/>
</div>
</div>
</template>
<script setup lang="ts">
import Menu from './Menu/index.vue'
import Header from './Header/index.vue'
import Content from './Content/index.vue'
</script>
<style lang="less" scoped>
.layout{
display: flex;
height: 100%;
overflow: hidden;
// &代表父级，less会自动拼接
&-right{
flex:1;
display:flex;
flex-direction: column;
}
}
</style><!-- ./layout/Content/index.vue -->
<template>
<div class="content">
<!-- 使用flex自适应填满页面 -->
<div class="content-items" :key="item" v-for="item in 20">
{{item}}
</div>
</div>
</template>
<script setup lang="ts"></script>
<style lang="less" scoped>
.content{
flex:1;
margin: 20px;
border: 1px solid #ccc;
overflow: auto;
&-items{
padding: 20px;
border: 1px solid #ccc;
}
}
</style><!-- ./layout/Header/index.vue -->
<template>
<div class="header">
头部页面
</div>
</template>
<script setup lang="ts"></script>
<style lang="less" scoped>
.header{
height:60px;
border-bottom: 1px solid #ccc;
}
</style><!-- ./layout/Menu/index.vue -->
<template>
<div class="menu">
菜单页面
</div>
</template>
<script setup lang="ts"></script>
<style lang="less" scoped>
.menu{
width: 200px;
border-right: 1px solid #ccc;
}
</style>页面效果
