新建vue项目
main.js
import Vue from 'vue'
import App from './App.vue'
import store from "@/store";
import router from "@/router";
import '@/utils/vant-ui';
Vue.config.productionTip = false;
new Vue({
render: h => h(App),
router,
store,
}).$mount('#app');app.vue
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
</style>search index.vue
<template>
<div>我是Search</div>
</template>
<script>
export default {
name: "SearchIndex"
}
</script>
<style scoped>
</style>search list.vue
<template>
<div>我是List</div>
</template>
<script>
export default {
name: "ListIndex"
}
</script>
<style scoped>
</style>productDetails index.vue
<template>
<div>我是ProductDetails</div>
</template>
<script>
export default {
name: "ProductDetailsIndex"
}
</script>
<style scoped>
</style>pay index.vue
<template>
<div>我是Pay</div>
</template>
<script>
export default {
name: "PayIndex"
}
</script>
<style scoped>
</style>myOrder index.vue
<template>
<div>我是MyOrder</div>
</template>
<script>
export default {
name: "MyOrderIndex"
}
</script>
<style scoped>
</style>login index.vue
<template>
<div>我是Login</div>
</template>
<script>
export default {
name: "LoginIndex"
}
</script>
<style scoped>
</style>layout cart.vue
<template>
<div>我是cart</div>
</template>
<script>
export default {
name: "CartPage"
}
</script>
<style scoped>
</style>layout category.vue
<template>
<div>我是category</div>
</template>
<script>
export default {
name: "CategoryPage"
}
</script>
<style scoped>
</style>layout home.vue
<template>
<div>我是Home</div>
</template>
<script>
export default {
name: "HomePage"
}
</script>
<style scoped>
</style>layout index.vue
<template>
<div class="layout-index">
<!-- 二级路由出口，二级组件展示的位置 -->
<router-view></router-view>
<van-tabbar route active-color="#ee0a24" inactive-color="#000">
<van-tabbar-item to="/home" icon="wap-home-o">首页</van-tabbar-item>
<van-tabbar-item to="/category" icon="apps-o">分类页</van-tabbar-item>
<van-tabbar-item to="/cart" icon="shopping-cart-o">购物车</van-tabbar-item>
<van-tabbar-item to="/user" icon="user-o">我的</van-tabbar-item>
</van-tabbar>
</div>
</template>
<script>
export default {
name: "LayoutIndex"
}
</script>
<style scoped>
</style>layout user.vue
<template>
<div>我是user</div>
</template>
<script>
export default {
name: "UserPage"
}
</script>
<style scoped>
</style>vant-ui.js
import Vue from 'vue'
//Vant组件库，全部导入方式
// npm i vant@latest-v2 -s
// import Vant from 'vant'
// import 'vant/lib/index.css'
// Vue.use(Vant);
//按需导入
import { Button, Tabbar, TabbarItem } from 'vant'
//注册使用
Vue.use(Button);
Vue.use(Tabbar);
Vue.use(TabbarItem);store index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
const store = new Vuex.Store({
modules:{
}
});
export default store;router index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '@/views/login'
import Layout from '@/views/layout'
import MyOrder from '@/views/myorder'
import Pay from '@/views/pay'
import ProductDetails from '@/views/productdetails'
import Search from '@/views/search'
import SearchList from '@/views/search/list'
import Home from "@/views/layout/home";
import Cart from "@/views/layout/cart";
import Category from "@/views/layout/category";
import User from "@/views/layout/user";
Vue.use(VueRouter);
const router = new VueRouter({
routes:[
{ path:'/login',component:Login},
{
path:'/',
component: Layout,
redirect:'/home',
children:[
{ path:'/home',component:Home},
{ path:'/category',component:Category},
{ path:'/cart',component: Cart},
{ path:'/user',component:User}
]
},
{ path:'/search',component:Search},
{ path:'/searchList',component: SearchList},
{ path:'/productDetails/:id',component:ProductDetails},
{ path:'/pay',component:Pay},
{ path:'/myOrder',component:MyOrder}
]
});
export default router;