看一下 HelloWorld.vue
打开 components 文件夹中的 HelloWorld.vue 文件，先简单看一下，可以看到其实和 App.vue 是差不多的。
- html 结构内容写在
template里面
- js 部分写在
script里面，使用export default{}暴露出去
- css 部分写在
style里面，不过有点区别，就是多了一个scoped
scoped 的作用
scoped 的作用是下面样式的作用域就是当前这个组件，其他组件无法使用这个组件的样式。目前我们只需要知道是这么回事就可以了。
创建组件
我们在 components 文件夹中创建一个v-header.vue文件，也就是v-header组件。在网页中，头部一般有导航菜单，比如：首页，关于等，那么我们先模仿HelloWorld.vue开始编写代码。
全部代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
| <template>
<div class="v-header">
<ul class="menus">
<li
class="menu"
v-for="item in menus"
:key="item.id"
>{{ item.name }}</li>
</ul>
</div>
</template>
<script>
export default {
name: 'v-header',
desc: '头部信息',
data() {
return {
menus: [
{ id: 1, name: '首页', path: '/' },
{ id: 2, name: '关于', path: '/about' },
]
}
}
}
</script>
<style scoped>
.v-header {
width: 100%;
height: 70px;
background-color: #fff;
box-shadow: 3px 3px 3px #ddd;
color: #333;
}
.menus {
list-style: none;
padding: 0 20px;
overflow: hidden;
}
.menu {
float: left;
padding: 0 20px;
height: 70px;
line-height: 80px;
transition: .3s;
}
.menu:hover {
cursor: pointer;
color: #0051ff;
background-color: #efefef;
}
</style>
|
引入组件
上一章说过，App.vue 是页面入口文件，所以我们需要修改这个文件，代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| <template>
<div id="app">
<v-header />
</div>
</template>
<script>
import vHeader from './components/v-header.vue'
export default {
name: 'App',
components: {
vHeader
}
}
</script>
<style>
* {
padding: 0;
margin: 0;
}
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
}
</style>
|
运行
打开 cmd 窗口并输入指令npm run serve，然后在浏览器中运行，正常显示，相信大家此刻一定有想继续做下去的冲动，先不要急，大家再好好看一下这个项目的其他文件，冷静一下，我们需要保持清醒。