这是我们想要的效果，接下来开始动手啦：
logo.png
在index.html的<body>设立挂载点
<pre>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>demo2</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<link rel="stylesheet" type="text/css" href="static/css/reset.css">
</head>
<body>
//挂载点
<div id="app"></div>
<script src="/dist/build.js"></script>
</body>
</html>
</pre>
App.vue的代码：
<pre>
<template>
<div id="app">
<v-header></v-header>
<div class="tab">
<div class="tab-item">商品</div>
<div class="tab-item">评论</div>
<div class="tab-item">商家</div>
</div>
<div class="content">
I am content
</div>
</div>
</template>
<script>
//import注册<v-header></v-header> 头组件
import header from './components/header/header.vue';
//export default 导出一个对象
export default{
components: {
'v-header': header
}
};
</script>
<style lang="stylus" rel="stylesheet/stylus">
#app
.tab
display: flex
width: 100%
height : 40px
line-height :40px
.tab-item
flex:1
text-align :center
</style>
</pre>
Main.js代码：
<pre>
import Vue from 'vue';
import App from './App.vue';
new Vue({
el: '#app',
render: h => h(App)
});
</pre>
最后一步，在components文件夹的header文件创建 “header”头组件
components\header\header.vue
<pre>
<template>
<div class="header">
我是header
</div>
</template>
<script type="text/ecmascript-6">
export default{};
</script>
<style lang="stylus" rel="stylesheet/stylus">
</style>
</pre>
网友评论