16.vue-cli跨域,swiper,移動端項目

標籤：stat   100%   containe   ble   modules   ons   重寫   oat   loop   

==解決跨域：==

1、後台 cors cnpm i -S cors
2、前端 jsonp
3、代理 webpack: myvue\config\index.js 找 proxyTable

proxyTable: {  "/anhao": {    target: "http://localhost:3000",    changeOrigin: true,    pathRewrite: { //需要rewrite重寫的, 如果在伺服器端做了處理則可以不要這段      "^/anhao": ""    }  }},

vue外掛程式:

axios vue-axios vue2-animate vuex swiper

cnpm i -S axios vue2-animate vuex swiper

vuex swiper //輪播特效copy

==移動端布局==：rem

rem:  r---> html emhtml{font-size:100px;}標準的字型大小 100        當前的字型的大小 rem?-------------------  = -------------------表示視圖的寬度 750        當前的視圖的寬度 document.documentElement.clientWidth320px 640px  750px 1250pxrem?= 100/750*clientWidth = clientWidth/(7.5|3.75) + "px";

<transition>    <div v-show="isShow"></div></transition>

vue--->vuex
1、直接調用mutations ----> commit
2、直接調用actions ---> dispatch

==mai zuo wang:==

首頁,頭部,菜單,banner圖

Main.js:

import Vue from "vue";import VueAxios from "vue-axios";import Axios from "axios";import App from "./App";import store from "./store";import router from "./router";import "vue2-animate/dist/vue2-animate";//Vue.prototype.$http = axios;//引入axiosVue.use(VueAxios,Axios);//引入axiosVue.config.productionTip = false;/* eslint-disable no-new */new Vue({  el: "#app",  router,  store,  components: { App },  template: "<App/>"})

store/index.js

vuex的store配置

import Vue from "vue";import Vuex from "vuex";import Axios from "axios";Vue.use(Vuex);let store = new Vuex.Store({    state:{        isShow:false,        title:"",    },    getters:{},    mutations:{        showMutation(state,payload){            state.isShow = !state.isShow;            //console.log("payload",payload);        },        yingyuanMutation(state,payload){            state.title = "全部影院";        },        changeMutation(state,payload){            state.title = "賣座電影";        },        loginMutation(state,payload){            state.title = "登入";        },            },    actions:{        showAction({commit},payload){            commit("showMutation");        },        changeAction({commit},payload){            commit("changeMutation");        },        yingyuanAction({commit},payload){            commit("yingyuanMutation");        },        loginAction({commit},payload){            commit("loginMutation");        },    },    modules:{},});console.log(111111,store.state.title)export default store;

router/index.js

路由配置js

import Vue from ‘vue‘import Router from ‘vue-router‘import Home from ‘@/components/Home‘;import Login from ‘@/components/Login‘;import City from ‘@/components/City‘;import FilmList from "@/components/FilmList";import FilmDetail from "@/components/FilmDetail";import Cinema from "@/components/Cinema";import Order from "@/components/Order";Vue.use(Router)const router = new Router({  routes: [    {path: ‘/‘,name: ‘home‘,component: Home},    {path: ‘/login‘,name: ‘login‘,component: Login},    {path: ‘/city‘,name: ‘city‘,component: City},    {path: "/filmlist",name: "filmlist",component: FilmList},    {path: "/filmdetail/:id",name: "filmdetail",component: FilmDetail,props:true},    {path:"/cinema",name:"cinema",component:Cinema},    {path:"/order",name:"order",component:Order},    {path: "/*",redirect:"/"},  ]});router.beforeEach((to, from, next) => {  console.log("beforeEach",to);  const token = localStorage.token;     if(to.path == "/order"){     if(!token){       alert("請先登陸");       router.push("/login");     }  }  next();})export default router;

App.vue

<template>  <div id="app">    <mz-header></mz-header>    <mz-menu></mz-menu>    <router-view class="content"></router-view>  </div></template><script>import Header from "@/components/Header";import Menu from "@/components/Menu";export default {  name: "App",  data(){    return {    };  },  methods:{  },  components:{    [Header.name]:Header,    [Menu.name]:Menu  }}</script><style>*{margin:0;padding:0;list-style:none;box-sizing: border-box;}html,body{width:100%;}/*overflow: hidden; */a{ text-decoration: none; font-size:12px; color: #000;}.fl{float: left;}.fr{float: right;}#app {  width:375px; -height: 100%;  background: #ccc; margin: 0 auto;}.content{padding-top:50px;}</style>

Header.vue

<template>  <div class="mz-home">     <mz-banner></mz-banner>     <!-- <mz-film type="now-playing"></mz-film>     <mz-film type="coming-soon"></mz-film> -->     <mz-film v-for="(item,index) in arr" :key="index" :type="item"></mz-film>      </div></template><script>import {mapActions,mapMutations,mapState,mapGetters} from "vuex";import Swiper from "swiper";import "swiper/dist/css/swiper";import Banner from "./Banner";import Film from "./Film";import Vue from ‘vue‘;export default {  name: "mz-home",  data() {    return {      arr:["now-playing","coming-soon"]    }  },  methods:{    ...mapActions({change:"changeAction"}),  },  computed:{  },  components:{    [Banner.name]:Banner,    [Film.name]:Film,  },  created(){    this.change()  }}</script><style>.swiper-container {width: 375px;height: 210px;}  .swiper-container img{width: 100%;height: 100%;}  .film{padding:17px;padding-top: 18px;}.film li{height:240px; background: yellow;margin-bottom:17px;}.film li img{width: 100%;height: 100%;}   </style>

Home.vue

<template>  <div class="mz-home">     <mz-banner></mz-banner>     <!-- <mz-film type="now-playing"></mz-film>     <mz-film type="coming-soon"></mz-film> -->     <mz-film v-for="(item,index) in arr" :key="index" :type="item"></mz-film>      </div></template><script>import {mapActions,mapMutations,mapState,mapGetters} from "vuex";import Swiper from "swiper";import "swiper/dist/css/swiper";import Banner from "./Banner";import Film from "./Film";import Vue from ‘vue‘;export default {  name: "mz-home",  data() {    return {      arr:["now-playing","coming-soon"]    }  },  methods:{    ...mapActions({change:"changeAction"}),  },  computed:{  },  components:{    [Banner.name]:Banner,    [Film.name]:Film,  },  created(){    this.change()  }}</script><style>.swiper-container {width: 375px;height: 210px;}  .swiper-container img{width: 100%;height: 100%;}  .film{padding:17px;padding-top: 18px;}.film li{height:240px; background: yellow;margin-bottom:17px;}.film li img{width: 100%;height: 100%;}   </style>

Banner.vue

<template><div>   <!-- 輪播 https://m.maizuo.com/v4/api/billboard/home?__t=1533018029083-->    <div class="swiper-container">        <div class="swiper-wrapper">            <div class="swiper-slide" v-for="item in arr" :key="item.id">              <img :src="item.imageUrl" />            </div>         </div>     </div></div></template><script>import Swiper from "swiper";import "swiper/dist/css/swiper";export default {    name: ‘mz-banner‘,  data () {    return {      arr:[],    }  },  created(){    //  https://m.maizuo.com/v4/api/billboard/home?__t=1533018029083    let url = "http://localhost:9000/mz/v4/api/billboard/home";    this.$http.get(url,{params:{__t:Date.now()}}).then(res=>{      this.arr = res.data.data.billboards;    });  },  updated(){    new Swiper (".swiper-container",{loop: true});        }}</script><!-- Add "scoped" attribute to limit CSS to this component only --><style scoped></style>

Menu.vue

<template>  <div class="mz-menu">    <transition name="slideLeft">      <ul v-show="isShow" @click="show" >           <router-link tag="li" v-for="item in arr" :to="item" :key="item.id">{{item.content}}</router-link>      </ul>    </transition>    <transition name="fade">      <div v-show="isShow" class="mask" @click="show"></div>    </transition>  </div></template><script>import {mapActions,mapMutations,mapState,mapGetters} from "vuex";export default {  name: "mz-menu",  data () {    return {       arr:[         {id:Math.random(),content:"首頁",path:"/home",name:"home"},         {id:Math.random(),content:"影片",path:"/filmlist",name:"filmlist"},         {id:Math.random(),content:"影院",path:"/cinema",name:"cinema"},         {id:Math.random(),content:"商城",path:"/home",name:"home"},         {id:Math.random(),content:"我的",path:"/login",name:"login"},         {id:Math.random(),content:"賣座卡",path:"/card",name:"card"},       ],    }  },  computed:{    ...mapState({isShow:"isShow"})    // isShow(){    //   return this.$store.state.isShow;    // }  },    methods:{       ...mapMutations({show:"showMutation"}),       // show(){    //    this.$store.commit("showMutation");    // }  },  created(){    }}</script><!-- Add "scoped" attribute to limit CSS to this component only --><style scoped>.mz-menu {position:fixed;left:0;top:50px;z-index:1000; -height: 100%; width:265px; }.mz-menu ul{width:265px;background: #282828;position:fixed;left:0;top:50px;right:0;bottom:0; z-index:2 ; -overflow: hidden;border-top: 1px solid #666;}.mz-menu li{width:100%;  height:50px; line-height:50px;color: #9a9a9a;  font-size: 14px; padding: 0 16px;border-bottom: 1px dotted #333;}.mask{    position: fixed;top: 0;bottom: 0; left: 0; right: 0;z-index: 1;    background: rgba(0,0,0,0.5);}/* .fade-enter,.fade-leave-to{opacity: 0;}.fade-enter-active,.fade-leave-active{ transition: 1s all ease;}.fade-enter-to,.fade-leave{opacity: 1;} */</style>

Film.vue

<template>  <div class="mz-film">    <!-- 正在熱映 https://m.maizuo.com/v4/api/film/now-playing?__t=1533018029103&page=1&count=5 -->    <!-- 即將上映 https://m.maizuo.com/v4/api/film/coming-soon?__t=1533018029121&page=1&count=3 -->    <ul class="film">        <router-link tag="li" :to="{name:‘filmdetail‘,params:{id:item.id}}" v-for="item in arr" :key="item.id">          <img :src="item.cover.origin">        </router-link>    </ul>  </div></template><script>export default {  name: "mz-film",  props:["type"],  data () {    return {       arr:[]    }  },  methods:{    getFilms(){//now-playing | coming-soon      let params = {__t:Date.now(),page:1,count:5};        let url = `http://localhost:9000/mz/v4/api/film/${this.type}`;      this.$http.get(url,{params}).then(res=>{           this.arr = res.data.data.films;      });     }      },  created(){      this.getFilms();  },}</script>

16.vue-cli跨域,swiper,移動端項目