浅谈创建
src文件包含：
![\"Alt\"](\"https://img-blog.csdnimg.cn/20181220133610950.png#pic_center\")
代码书写:
App.vue
<template>
<div id=\"app\">
<!-- 最后一步，显示每一个页面的容器 -->
<div style=\"position:relative;height:100vh;overflow: hidden;\">
<transition :name=\"howGo\">
<router-view class=\"page_view\"> </router-view>
</transition>
</div>
<footer class=\"footer_menu\">
<div>
<!-- router- 做到局部跳转 -->
<router- to=\"/\">首页</router- >
</div>
<div>
<router- to=\"/cate\">分类</router- >
</div>
<div>
<router- to=\"/cart\">购物车</router- >
</div>
<div>
<router- to=\"/my\">我的</router- >
</div>
</footer>
</div>
</template>
< >
export default {
name: \'app\',
data(){
return{
howGo:\'\',
}
},
watch:{
\'$route\' (to,from){
if (from. .num > to. .num) {
this.howGo = \'right\'
}else{this.howGo = \'left\'}
}
}
// components: {
// slider,
// // HelloWorld
// },
// methods:{
// getMsg(rtnString){
// this.msg = rtnString
// }
// }
}
</ >
<style>
@import url(\'assets/home.css\')
</style>
main.js
// 引入依赖
import Vue from \'vue\'
import App from \'./App.vue\'
import router from \'./router/index\'
import axios from \'axios\'
import iview from \'iview\'
import \'iview/dist/styles/iview.css\'
Vue.use(iview)
Vue.config.productionTip = false
// axios.default. Url = \'http://localhost/node-vue.cli/first_vue_cli - 副本\'
// Vue.prototype.$http = axios
new Vue({
router,
render: h => h(App),
}).$mount(\'#app\')
index.js（路由文件）
import Vue from \'vue\'
import Router from \'vue-router\'
import home from \'../view/home\'
import cate from \'../view/cate\'
import cart from \'../view/cart\'
import my from \'../view/my\'
import ginfo from \'../view/ginfo\'
Vue.use(Router)
let router = new Router({
routes:[
{
path:\'/\',
component: home,
:{
num:1
}
},
{
path:\'/cate\',
component: cate,
:{
num:2
}
},
{
path:\'/cart\',
component: cart,
:{
num:3
}
},
{
path:\'/my\',
component: my,
:{
num:4
}
},
{
path:\'/ginfo\',
component: ginfo,
},
]
})
//export 相当于renturn
export default router
home.css（样式文件）
#app {
font-family: \'Avenir\', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
/*margin-top: 60px;*/
}
a {
text-decoration: none;
}
.page_view {
position: absolute;
width: 100%;
}
.footer_menu {
background-color: #fff;
color: #333;
display: flex;
position: fixed;
bottom: 0px;
width: 100%;
height: 30px;
line-height: 30px;
transform: translateZ(0);
}
.footer_menu>div {
width: 25%;
text-align: center;
}
input {
border: 1px solid #737272
}
img {
width: 100%;
}
.big_box {
position: relative;
width: 100%;
height: 360px;
overflow: hidden;
}
.box {
position: absolute;
width: 100%;
}
.R_box {
position: absolute;
left: 40%;
bottom: 20px;
display: flex;
}
.R_box>div {
width: 10px;
height: 10px;
background-color: #eee;
border-radius: 50%
}
.cur {
border: 1px solid #ccc;
background-color: red !important;
}
#i {
width: 148px;
margin: 0 auto
}
view（视图文件）
home.vue
<template>
<div style=\"width:100%;height:100vh;background-color:yellow;#fff\">首页
<slider :data=\"first_hdp\" />
<router- to=\"/ginfo\">商品详情
</router- >
</div>
</template>
< >
import slider from \'../components/slider.vue\'
import glist from \'../components/glist.vue\'
export default{
data(){
return{
first_hdp:[\'https://i8.mifile.cn/v1/a1/ec370747-6909-b8f8-8da0-dc2fc553eab3!720x360.webp\',\'https://i8.mifile.cn/v1/a1/7c2d766b-ad0b-2f98-4ff6-57a911c81993!720x360.webp\',\'https://i8.mifile.cn/v1/a1/0616543e-25ae-3248-87a4-959119d08897!720x360.webp\']
}
},
created(){
// this.$http.get(\'index.php?control=gooos&action=getList\')
// .then((rtnD)=>{
// })
},
components:{
slider,glist
}
}
</ >
my.vue
<template>
<!-- <div style=\"width:100%;height:100vh;background-color:green;#fff\">个人中心</div> -->
<div>
<!-- 登陆后显示个人中心 -->
<!-- 没登陆进入登录 -->
<div id=\"i\">
<Form :lable-width=\"80\" =\"return false\">
<Form-item label=\"用户名：\">
<input v-model=\"uname\" type=\"text\">
</Form-item>
<Form-item label=\"密码：\">
<input v-model=\"upwd\" type=\"passwrod\">
</Form-item>
<Form-item >
<Button @click=\"doLogin\" type=\"primary\">登录</Button>
</Form-item>
</Form>
</div>
</div>
</template>
< type=\"text/ \">
export default{
data(){
return {
uname: \'\',
upwd: \'\',
}
},
methods:{
doLogin(){
this.$http.get(\'index.php?control=user&action=login\',{
params:{
uname:this.uname,
upwd:this.upwd,
}
}).
then((rtnD)=>{
})
}
}
}
</ >
ginfo.vue
<template>
<div style=\"width:100%;height: 100vh\">
<Button type=\"primary\" @click=\"addCx\">促销</Button>
<pop v-model=\"cx_show\">
促销.....
</pop>
<Button type=\"error\" @click=\"showCart\">加入购物车</Button>
<Button type=\"error\" @click=\"addCart\">加入购物车</Button>
<pop v-model=\"gwc_show\">
商品名称、商品价格
</pop>
</div>
</template>
< type=\"text/ \">
import pop from \'../components/pop.vue\'
export default{
data(){
return{
info:[],
cx_show:false,
gwc_show:false,
}
},
components:{
pop,
},
methods:{
addCx(){
this.cx_show = true
},
showCart(){
this.gwc_show = true
},
addCart(){
this.$Message.suceess(\'加入成功\');
var last_cart = localStorage.getItem(\'cart\')
if (last_cart) {last_cart = JSON.parse(last_cart)}
else{last_cart = []}
last_cart.push(this.info)
localStorage.setItem(\'cart\',JSON.stringify(this.info))
this.gwc_show = false
}
}
}
</ >
cate.vue
<template>
<div style=\"width:100%;height:100vh;\">
分类
</div>
</template>
cart.vue
<template>
<div style=\"width:100%;height:100vh;background-color:blue;#fff\">
购物车
</div>
</template>
组件
slider.vue（轮播组件）
<template>
<div>
<!-- 子组件说:
<input type=\"text\" v-model=\"msg\" @keydown=\"give_fzj\"> -->
<div class=\"big_box\">
<div class=\"box\" @touchstart=\"tStart\" @touchmove=\"tMove\" @touchend=\"tEnd\" v-for=\"(img,index) in data\">
<transition :name=\"howGo\">
<img v-show=\"index == show\" :src=\"img\">
</transition>
<div class=\"R_box\">
<div v-for=\"(img,index) in data\" :class=\"{cur:index == show}\"></div>
</div>
</div>
</div>
</div>
</template>
< >
export default {
data(){
return {
msg:\'\',
show:0,
howGo:null,
}
},
props:{
data:{
type:Array,
startX: 0,
default:\'\' // 设置默认值
}
},
created(){
// var that = this
// setInterval(function(){
// that.tStart()
// },2000)
},
methods:{
give_fzj(){
this.$emit(\'get\',this.msg)
console.log(this.msg)
},
tStart(e){
this.startX = e.touches[0].clientX
// e.removeEventListener(\"touches\",\"\",false)
},
tMove(e){
// console.log(e.touches[0].clientX)
// this.moveX = e.touches[0].clientX
// console.log(this.moveX)
// e.path[1].style.transform= \"translateX(\"+this.moveX+\"px)\"
// console.log(e.path[0].style)
},
tEnd(e){
// let endX = e.changedTouches[0].clientX
// if (endX > this.startX) {
// this.howGo = \'right\'
// console.log(\'right\')
// if (this.show==0) {
// this.show=0
// }else{
// --this.show
// }
// }else{
// this.howGo = \'left\'
// console.log(\'left\')
// if (this.show==this.data.length-1) {
// this.show=this.data.length-1
// }else{
// ++this.show
// }
// }
//
//三元运算法
let endX = e.changedTouches[0].clientX
if (endX > this.startX) {
this.howGo = \'right\'
--this.show
this.show = this.show<=0?0:this.show
}else{
this.howGo = \'left\'
++this.show
this.show = this.show>=this.data.length-1?this.data.length-1:this.show
}
// console.log(this.show)
// console.log(e)
},
}
}
</ >
<style type=\"text/css\" scoped>
/*进来前*/
/*.left-leave-to,*/
.left-enter,
.right-leave-to {
transform: translate(100%, 0);
}
/*进来后*/
.left-enter-active,
.left-leave-active,
.right-enter-active,
.right-leave-active {
transition: all 0.5s;
}
/*leave是给当前要走的图片家样式*/
/*.left-leave-active{
transition:all 2s;
}*/
.left-leave-to,
.right-enter {
transform: translate(-100%, 0);
}
/*向右*/
/*.rig-enter{
transform: translate(100%,0);
}*/
/*进来后*/
/*.rig-enter-active,.rig-leave-active{
transition:all 2s;
}
*/
/*.rig-leave-to{
transform: translate(-100%,0);
}*/
</style>
glist.vue（列表组件）
<template>
<div>
<div v-for=\"goods in goods_list\">
<img :src=\"goods.thumb\">
<p>{{goods.g_name}}</p>
<p>{{goods.g_price}}</p>
</div>
</div>
</template>
< type=\"text/ \">
export default{
props:{
goods_list:{
type:Array
}
}
}
</ >
pop.vue（弹窗组件）
<template>
<div>
<div>
商品详情
</div>
<div class=\"yy_box\" @click=\"hide\" v-show=\"this.value\"></div>
<transition name=\"upDownSlider\">
<div class=\"nr_box\" v-show=\"this.value\">
<div class=\"colose\"></div>
<div class=\"content\"></div>
</div>
</transition>
</div>
</template>
< >
export default {
props: {
value: {
type: Boolean,
default: false,
}
},
data() {
return {
pop_show: this.value
}
},
watch:{
value() {
this.pop_show = this.value
}
},
methods: {
hide() {
this.is_show = false
// 子组件告诉父组件
this.$emit(\'input\', false)
}
}
}
</ >
<style scoped>
.yy_box {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: #333;
opacity: .5;
}
.upDownSlider-enter {
transform: translate(0, 100%)
}
.upDownSlider-leave-to {
transform: translate(0, 100%)
}
.upDownSlider-enter-active,.upDownSlider-leave-active {
transition: all 1s
}
.nr_box {
background-color: red;
width: 100%;
height: 300px;
position: fixed;
bottom: 0;
}
</style>
-
解决问题
- position:fixed; 抖动问题 -> 加上transform:translateZ(0)
- 轮播效果 :
？-enter （进入过渡的开始状态）
？-enter-active(进入过渡生效时的状态)
?–leave-active(离开过渡生效时的状态)
?–leave-to(离开过渡的结束状态) - 弹窗
-
未解决问题
- axios请求
继续阅读与本文标签相同的文章
上一篇 :
好电视离不开好音频
下一篇 :
广播行业IP状态调查
-
Surprise 你天天登录的OA系统，全新升级啦
2026-05-15栏目： 教程
-
IEEE计算机协会“人工智能与智能制造工作组全会”即将召开！
2026-05-15栏目： 教程
-
5G在未来如何助力工业物联网
2026-05-15栏目： 教程
-
Uber在巴黎部署摩托车共享服务 租金一分钟29美分
2026-05-15栏目： 教程
-
当科技时代的到来银行数据仓库将如何让发展
2026-05-15栏目： 教程