概述

在src/components下新建一个HelloWorld.vue文件，每个.vue文件都包括三个部分：<template>模版代码块，<script>是js代码块，<style>是样式代码块，其中如果<style>使用了scoped属性（让当前组件的样式不会修改到其它地方的样式，在父组件中是不能直接修改子组件的样式的，需要在父组件中使用vue的深度作用选择器），该样式只在本.vue文件下生效

HelloWolrd.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<template>
  <div>
    <p class="info">{{ info }}</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      info: 'Hello Vue!'
    }
  }
}
</script>

<style scoped>
.info {
  color: red;
  font-size: 20px;
}
</style>

修改App.vue

删除App.vue的全部代码，重写，在<template>中使用组件，<script>中引入组件，<style>中写样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<template>
  <div>
    <HelloWorld></HelloWorld>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld'//引入组件HelloWorld.vue
export default {
  name: 'App',
  components: {
    //映射组件标签,可以写成HelloWorld:HelloWorld,如果文件名和组件名一样那么可简写成HelloWorld
    HelloWorld
  }
}
</script>

<style scoped>

</style>

修改main.js

src下的main.js 这个是项目入口配置文件，代码也删除重写

1
2
3
4
5
6
7
8
9
10
11
12
/*
入口js:创建实例
*/
import Vue from 'vue'
import App from './App'
new Vue({
  el:'#app',
  components:{
    App
  },
  template:'<App></App>'
})

启动项目

img