vue学习（四）脚手架创建的vue项目中，组件的创建、使用，以及引用css文件

脚手架创建的vue项目结构如图：

components：所有的vue组件都是写在这个里面的。

assets：存放css文件的。

1、创建组件

1、现在components文件夹中创建一个.vue的文件，这个文件不能是单个单词，必须多个。

子组件：DemoHello.vue

<template>
  <div class="demo">
      <h1>测试创建组件</h1>
  </div>
</template>

<script>
export default {
    //组件名称，必须多个单词，不能单个单词
    name: 'DemoHello',
}
</script>

<style scoped>
    .demo{
        color: red;
    }
</style>

2、组件的使用

父组件：App.vue文件中使用，这个文件是脚手架生成就有的

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <DemoHello />//组件使用的地方
  </div>
</template>

<script>
//引入组件
import DemoHello from './components/DemoHello.vue';

export default {
  name: 'App',
  //注册组件
  components: {
    DemoHello,
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

3、组件中引用css文件

1、在assets下面创建css文件夹，里面在创建一个demoHello.css文件。

demoHello.css：

.demo{
    color: red;
}

2、在DemoHello.vue文件中引用

<template>
  <div class="demo">
      <h1>测试创建组件</h1>
  </div>
</template>

<script>
export default {
    name: 'DemoHello',
}
</script>

//scoped : 这个样式里面写的css样式，只会作用于当前组件，而不是全局。
<style scoped>
     /* 引入css文件,这种引入方法，这个css文件的会作用全局 */
    /* @import '../assets/css/demoHello.css'; */
    
    .demo {
        font-size: 21%;
    }
</style>
// 这种引入方法，css文件只会作用当前组件
<style src="../assets/css/demoHello.css" scoped></style>