要模仿的界面如下:
一、组件拆分
1)重设css
在static中新增css/reset.css,样式参考:https://github.com/lwl0812/vue-sell/tree/master/static/css
在index.html中引入reset.css
2)设置移动端的viewport
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
3)重写 App.vue
<template> <div id="app"> <div class="header"> I am header. </div> <header></header> <div class="tab"> I am tab. </div> <div class="content"> I am content. </div> </div> </template> <script> export defaut {}; </script> <style> </style>
4)增加 header 组件
在 components 下新建 header/header.vue,内容如下:
<template> <div class="header"> 我是header </div> </template> <script> export default {}; </script> <style lang="stylus" rel="stylesheet/stylus"> </style>
编译stylus时会报错,可以安装下stylus,然后重启
npm install stylus --save-dev
npm run dev
5)修改 App.vue
引用header组件
// App.vue
<script> import header from './components/header/header'; export default { components: { 'v-header': header // 此处header与原生html名字相同,所以需要重命名,按es6的语法写的话,只要写header即可,具体参看es6语法 } }; </script>
使用header组件
// App.vue <template> <div id="app"> <v-header></v-header> <!--使用header组件--> <div class="tab"> I am tab. </div> <div class="content"> I am content. </div> </div> </template>
此时,界面如下:
6)增加tab内容
// App.vue <template> <div id="app"> <v-header></v-header> <div class="tab"> <!--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>
7)为tab增加样式
// App.vue <style lang="stylus" rel="stylesheet/stylus"> .tab display: flex 100% height: 40px line-height: 40px .tab-item flex: 1 text-align: center </style>
样式使用了flex布局,可参考阮一峰老师的语法篇和实例篇:
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
此时,界面如下:
这一节完成,下一节学习vue-router