Vue学习——scoped样式

作用：让样式在局部生效，防止冲突

写法：<style scoped>

总结：可以防止在两个组件中使用了相同名字的style样式而导致后面引入的样式覆盖了前面的样式的冲突，但在App.vue文件中最好不要使用，因为App.vue通常存放所有的style样式，大多数情况都是用来在全局使用的。此外可以使用npm view webpack versions命令查看webpack的历史版本，使用npm i less-loader@版本号配置less-loader，当ledd-loader版本高于webpack版本不少时安装可能会报错。

App.vue

<template>
  <div id="app" class="app">
    <Blogger/>
    <hr>
    <friend/>
  </div>
</template>
<script>
  // 引入
  import Blogger from './components/Blogger.vue'
  import Friend from './components/Friend.vue'

  export default {
    name: 'app',
    components: { Blogger,Friend }
}
</script>

<style lang="less">
  .app{
    background-color: cornflowerblue;
    .qwe{
      font-size: 40px;
    }
  }
</style>

Blogger.vue

<template>
    <div class="blogger">
        <h1>{{msg}}</h1>
        <h2>博主尊称：{{name}}</h2>
        <h2>博主性别：{{sex}}</h2>
        <el-button type="primary" icon="el-icon-s-promotion" @click="skip">点我跳转到博主博客</el-button>
    </div>
</template>

<script>

export default {
    name:'Blogger',
    data() {
        return {
            name:'才疏学浅的小缘同学',
            sex:'帅哥',
            msg:'青衫烟雨客，似是故人来',
        }
    },
    methods:{
        skip() {
        window.location.href="https://xiaoyuan.blog.csdn.net/"
        }
    }
}
</script>

<style>
    .blogger{
        text-align: center;
    }
</style>

实现效果

 less-loader版本过高导致安装不了的情况