在项目中使用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>