小米详情页

原创

于 2021-11-20 15:01:36 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

这篇博客介绍了如何使用Vue.js和相关技术实现小米商城商品详情页，包括路由配置、组件（NavHeader、NavFooter、ProductParam）的创建和交互，以及VueAwesomeSwiper的引入和使用。内容涉及VueRouter的配置、组件模板编写、样式设计以及数据获取和显示。

路由配置

import Vue from 'vue'

import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [{

path: '/',

name: 'Detail',

component: () => import('../views/Detail.vue')

}, ]

const router = new VueRouter({

routes

})

export default router

main.js

import Vue from 'vue'

import App from './App.vue'

import router from './router'

import store from './store'

import VueAwesomeSwiper from 'vue-awesome-swiper'

import 'swiper/css/swiper.css'

Vue.use(VueAwesomeSwiper)

Vue.config.productionTip = false

new Vue({

router,

store,

render: h => h(App)

}).$mount('#app')

APP.vue

<router-view />

</div>

</template>

* {

margin: 0;

padding: 0;

list-style: none;

outline: none;

text-decoration: none;

}

.flex {

display: flex;

}

.j-s {

justify-content: space-between;

}

.j-c {

justify-content: center;

}

.a-c {

align-items: center;

}

#app {

width: 1200px;

margin: 0 auto;

}

</style>

Navfoot.vue

</div>

<li>小米天猫店</li>

</div>

<div>

京网文[2020]0276-042号

</div>

</template>

export default {

name: "NavFooter",

};

</script>

.navFooter {

margin: 0 auto;

width: 1100px;

border-top: 3px solid #fe6402;

height: 200px;

padding: 20px 0;

margin-top: 40px;

background-color: #333;

color: #eee;

.one {

img {

margin: 0 auto;

display: block;

margin-bottom: 20px;

}

:nth-child(2) {

text-align: center;

}

.menu {

padding: 20px 0;

li {

padding: 0 10px;

}

:last-child {

text-align: center;

}

</style>

NavHeader.vue

最低0.47元/天解锁文章