Vue專案首頁_header區域開發
阿新 • • 發佈:2019-02-16
在專案中使用stylus:
安裝stylus: npm install stylus --save npm install stylus-loader --save
建立Header子元件:
<template>
<div>
this is header
</div>
</template>
<script>
export default {
name: 'HomeHeader'
}
</script>
<style>
</style>
在Home中使用:
<template> <home-header></home-header> </template> <script> import HomeHeader from './components/Header' export default { name: 'Home', components: { HomeHeader } } </script> <style> </style>
效果:
Header.vue:
<template> <div class="header"> <div class="header-left">返回</div> <div class="header-input">輸入城市/景點/遊玩主題</div> <div class="header-right">城市</div> </div> </template> <script> export default { name: 'HomeHeader' } </script> <style lang="stylus" scoped> .header display: flex line-height: .86rem background: #00bcd4 color: #fff .header-left width: .64rem float: left .header-input flex: 1 line-height: .64rem height: .64rem margin-top: .12rem margin-left: .2rem background: #fff color: #ccc border-radius: .1rem .header-right width: 1.24rem text-align: center float: right </style>