工具：HBuilder X
将远程仓库代码克隆到本地后，先安装node_modules；
– cnpm install–
在src目录下清除无用的默认文件
目录分配：
views ===》 页面
components ===》页面中的组件（模块）
封装Tabbar
tabbar功能有四个：首页(home)|分类(list)|购物车(cart)|我的(my)
- 分别在router/index.js中进行路由配置。
const routes = [
{
path: "/home",
name: "Home",
component: Home,
},
{
path: "/",
redirect:'/home',
},
{
path: "/list",
name: "List",
component: () =>
import("../views/List.vue"),
},
{
path: "/cart",
name: "Cart",
component: () =>
import("../views/Cart.vue"),
},
{
path: "/my",
name: "My",
component: () =>
import("../views/My.vue"),
}
];
- view文件夹下创建相关的.vue文件；下面是Home.vue文件的代码。
<template>
<div class="home">
这是首页
</div>
</template>
<script>
export default {
name: "Home",
};
</script>
- 启动服务–
npm run serve–；在返回的地址http://localhost:8080/ 打开页面。 - 在assets/css文件夹下创建common.css文件，配置公共样式。 在assets/js文件夹下引入flexible.js淘宝无限适配文件。并在main.js文件中引用。
//公共css文件
import './assets/css/common.css'
//淘宝无限适配
import './assets/js/flexible'
- 在components/common文件夹下创建公共组件Tabbar.vue；然后就可以在页面中进行引用；下面是在Home.vue文件中引用的代码。
注：图片放在public/images文件夹里
<template>
<div class="home">
这是首页
<Tabbar></Tabbar>
</div>
</template>
<script>
import Tabbar from '../components/common/Tabbar.vue'
export default {
name: "Home",
components:{
Tabbar
}
};
</script>
- 下面对Tabbar.vue布局
<template>
<div class='tabbar'>
<ul>
<li
v-for='(item,index) in routerList'
:key='index'
@click='switchTab(item.path)'
>
<img :src="$route.path.includes(item.path) ? item.selected : item.active" alt="">
<span :class='$route.path.includes(item.path) ? "active" : "" '>{{item.title}}</span>
</li>
</ul>
</div>
</template>
<script>
export default{
data () {
return {
routerList:[
{
title:'首页',
path:'/home',
active:'./images/home.png',
selected:'./images/home-select.png',
},
{
title:'分类',
path:'/list',
active:'./images/list.png',
selected:'./images/list-select.png',
},
{
title:'购物车',
path:'/cart',
active:'./images/cart.png',
selected:'./images/cart-select.png',
},
{
title:'我的',
path:'/my',
active:'./images/my.png',
selected:'./images/my-select.png',
}
]
}
},
methods:{
switchTab( path ){
//判断是否点击的是同一个路由
if( this.$route.path == path ) return;
//对应跳转页面
this.$router.replace( path );
}
}
}
</script>
<style scoped>
.tabbar{
position: fixed;
left:0;
bottom:0;
z-index: 999;
width: 100%;
height: 1.6rem;
background-color: #fff;
}
.tabbar ul{
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
height: 100%;
}
.tabbar ul li{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.tabbar ul li img{
width: 0.826666rem;
height: 0.826666rem;
}
.tabbar ul li span{
font-size:0.426666rem;
}
.active{
color:red;
}
</style>
注： vue.config.js文件配置路径
@代替./src ——解决层级关系查找的一系列不必要麻烦
let path = require("path");
module.exports = {
configureWebpack: (config) => {
config.resolve = {
extensions: ['.js', '.json', '.vue'],
alias: {
'@': path.resolve(__dirname, './src'),
}
}
}
}
首页头部引入ly-tab插件
- 下载插件
–npm install ly-tab -S– - 在main.js中引用插件
–import LyTab from 'ly-tab'–
–Vue.use(LyTab)– - 使用
<template>
<ly-tab
v-model="selectedId"
:items="items"
:options="options">
</ly-tab>
</template>
<script>
export default {
name: "Home",
data () {
return {
selectedId: 0,
items: [
{label: '推荐'},
{label: '大红袍'},
{label: '绿茶'},
{label: '铁观音'},
{label: '普洱'},
{label: '茶具'},
{label: '花茶'}
],
options: {
activeColor: '#b0352f'
}
}
},
};
</script>
首页引入swiper插件
- 下载插件
–npm install vue-awesome-swiper@3.1.3 -S– - 引用及使用
<template>
<div class='swiper-main'>
<swiper :options="swiperOption">
<swiper-slide
v-for='(item,index) in swiperList'
:key='index'
>
<img :src="item.imgUrl" alt="">
</swiper-slide>
</swiper>
<div class="swiper-pagination"></div>
</div>
</template>
<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
name: 'Swiper',
data(){
return{
swiperList:[
{
id:1,
imgUrl:'./images/swiper1.jpeg'
},
{
id:2,
imgUrl:'./images/swiper2.jpeg'
},
{
id:3,
imgUrl:'./images/swiper3.jpeg'
}
],
swiperOption: {//swiper3
autoplay: 3000,
speed: 1000,
pagination: {
el: '.swiper-pagination'
}
}
}
},
components: {
swiper,
swiperSlide
},
}
</script>
<style scoped>
.swiper-main{
position: relative;
width: 100%;
height: 4.4rem;
margin-top:3rem;
}
.swiper-container{
width: 100%;
height: 4.4rem;
}
.swiper-main img{
width: 100%;
height: 4.4rem;
}
.swiper-pagination{
width: 100%;
bottom:0px;
}
::v-deep .swiper-pagination-bullet-active{
background-color: #b0352f;
}
::v-deep .swiper-pagination-bullet{
margin:0 0.08rem;
}
</style>
效果图：
