浅谈创建
src文件包含:
![Alt](https://i-blog.csdnimg.cn/blog_migrate/919fe9b22aaae801e0027961c918f2c3.png)
代码书写:
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-link 做到局部跳转 -->
<router-link to="/">首页</router-link>
</div>
<div>
<router-link to="/cate">分类</router-link>
</div>
<div>
<router-link to="/cart">购物车</router-link>
</div>
<div>
<router-link to="/my">我的</router-link>
</div>
</footer>
</div>
</template>
<script>
export default {
name: 'app',
data(){
return{
howGo:'',
}
},
watch:{
'$route' (to,from){
if (from.meta.num > to.meta.num) {
this.howGo = 'right'
}else{this.howGo = 'left'}
}
}
// components: {
// slider,
// // HelloWorld
// },
// methods:{
// getMsg(rtnString){
// this.msg = rtnString
// }
// }
}
</script>
<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.baseUrl = '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,
meta:{
num:1
}
},
{
path:'/cate',
component: cate,
meta:{
num:2
}
},
{
path:'/cart',
component: cart,
meta:{
num:3
}
},
{
path:'/my',
component: my,
meta:{
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-link to="/ginfo">商品详情
</router-link>
</div>
</template>
<script >
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
}
}
</script>
my.vue
<template>
<!-- <div style="width:100%;height:100vh;background-color:green;#fff">个人中心</div> -->
<div>
<!-- 登陆后显示个人中心 -->
<!-- 没登陆进入登录 -->
<div id="i">
<Form :lable-width="80" onsubmit="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>
<script type="text/javascript">
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)=>{
})
}
}
}
</script>
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>
<script type="text/javascript">
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
}
}
}
</script>
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>
<script>
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)
},
}
}
</script>
<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>
<script type="text/javascript">
export default{
props:{
goods_list:{
type:Array
}
}
}
</script>
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>
<script>
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)
}
}
}
</script>
<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>