8.使用scss,创建组件,scoped局部作用域

1.使用scss

scss是能让css从属关系看起来更加直观

在项目目录下运行安装命令:

cnpm install node-sass --save-dev
cnpm install sass-loader --save-dev

然后在项目目录中的webpack.config.js中的rules里加入配置代码:

{
        test: /\.scss$/,
        loaders: ['style', 'css', 'sass']
},

 如果出现报错:

Module build failed: TypeError: this.getResolve is not a function

 sass-loader的版本过高导致的编译错误,当前最高版本是8.x,需要退回到7.3.1运行

cnpm uninstall sass-loader(卸载当前版本)

cnpm install sass-loader@7.3.1 --save-dev

cnpm install

2.新建组件

在src目录下新建目录components,在components目录下新建组件取名Home.vue:

<template>
    <div>
        <h2>这是一个首页组件</h2>
        <button @click="run">弹出首页组件提示</button>
    </div>
</template>
<script>
export default {
  name: 'home',  
  data () {
    return {
        msg:'首页组件'
    }
  },
  methods:{
    run(){
        alert(this.msg)
    }
  }

}
</script>
<style lang="scss" scoped>
h2{
    color: red;
}
</style>

3.在根组件App.vue中引用挂载组件

<template>
  <div id="app">
    <h2>{{msg}}</h2>
    <v-home></v-home>
  </div>
</template>
<script>
// 1.引入组件
// 2.挂载组件
// 3.在模板中引用
import Home from './components/Home.vue';
export default {
  name: 'app',
  data () {
    return { 
      msg:'根组件'
    }
  },
  methods:{
  },
  components:{
    'v-home':Home
  }

}
</script>
<style>

</style>

 组件除了可以在根组件中挂载,也可以在组件之间互相挂载。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端桃园

探寻浏览器渲染的秘密

起因是这样,有运营小姐姐跟我反馈某个页面卡顿的厉害。心中突然一想,妈耶不会有bug吧,心慌慌的。然后自己打开页面,不卡呀,流畅的一xx,肯定是她弄错了。带着去教...

12310
来自专栏崔庆才的专栏

我是怎么把博客粉丝转到公众号的

我大约在 2014 年底开了自己的个人博客,当时就是想自己记录点学习总结,一个是方便查阅,二是锻炼一下自己写总结或者文章的能力,最初就是记录一些日常生活、编程学...

13940
来自专栏前端技术分享|前沿资讯|读书分享

进入移动Web世界

那么问题来了,为什么会有一个默认的viewport呢?我们知道,pc端页面,在移动端查看的时候,由于像素不匹配,但是为了能够给用户展现一个比较完整的页面,因此会...

7920
来自专栏蚂蚁开源社区

基于CSS3技术,炫酷3D立方体预加载loading特效

这是一款css3炫酷3D立方体预加载loading特效。该特效通过简单的HTML元素和CSS3代码,构建几个立方体不停运动的动画特效,适用于做页面的loadin...

11520
来自专栏Datawhale专栏

Pandas常见的性能优化方法

Pandas是数据科学和数据竞赛中常见的库,我们使用Pandas可以进行快速读取数据、分析数据、构造特征。但Pandas在使用上有一些技巧和需要注意的地方,如果...

8930
来自专栏前端重点笔记

媒体类型和响应式设计

二、媒体类型引用方法:link标签,xml方式,@import和css3新增的@media四种

9630
来自专栏蚂蚁开源社区

【前端小技巧】CSS3实现环形进度条

前端设计肯定会遇到进度条的问题,很多人直接使用js插件,需要引入js文件,增加页面承载量,容易引起冲突。

70810
来自专栏前端重点笔记

vue中v-show和v-if的异同

7510
来自专栏前端重点笔记

css3新增选择器

7730
来自专栏胡哥有话说

探寻浏览器渲染的秘密

起因是这样,有运营小姐姐跟我反馈某个页面卡顿的厉害。心中突然一想,妈耶不会有bug吧,心慌慌的。然后自己打开页面,不卡呀,流畅的一xx,肯定是她弄错了。带着去教...

6610

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励