16.VUE-CLI cross-domain, Swiper, mobile-side projects

Source: Internet
Author: User

= = Resolve cross-domain: = =

1. Background cors cnpm i-s cors
2. Front JSONP
3, Agent Webpack:myvue\config\index.js find proxytable

proxyTable: {  "/anhao": {    target: "http://localhost:3000",    changeOrigin: true,    pathRewrite: { //需要rewrite重写的, 如果在服务器端做了处理则可以不要这段      "^/anhao": ""    }  }},
Vue plugin:

Axios Vue-axios vue2-animate Vuex swiper

CNPM i-s Axios vue2-animate Vuex swiper

Vuex swiper//Carousel effect Copy

= = Mobile-side layout ==: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. Call mutations----> commit directly
2. Direct call to actions---> dispatch

==mai Zuo wang:==

Home, head, menu, banner chart

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

Store configuration for Vuex

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:{}, Mutati            ons:{showmutation (state,payload) {state.isshow =!state.isshow;        Console.log ("payload", payload);        }, Yingyuanmutation (state,payload) {state.title = "all cinemas";        }, Changemutation (state,payload) {state.title = "blockbuster movie";        }, Loginmutation (state,payload) {state.title = "login";        },}, 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

Routing Configuration JS

Import vue from ' Vue ' import Router from ' vue-router ' import Home from ' @/components/home ', import Login from ' @/components/l Ogin ', 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 ', compo Nent: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.b  Eforeeach (to, from, next) = {Console.log ("Beforeeach", to);     Const token = Localstorage.token;       if (To.path = = "/order") {if (!token) {alert ("Please login First"); 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-PL Aying "></mz-film> <mz-film type=" Coming-soon "></mz-film>-<mz-film v-for=" (Item,inde x) in arr ": key=" index ": type=" Item "></mz-film> </div></template><script>import {mapactio Ns,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 () {RET Urn {arr:["now-playing", "Coming-soon"]}}, methods:{... mapactions ({change: "Changeaction"}),}, computed: {}, components:{[Banner.name]:banner, [Film.name]:film,}, created () {This.change ()}}</script><s  Tyle>.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-PL Aying "></mz-film> <mz-film type=" Coming-soon "></mz-film>-<mz-film v-for=" (Item,inde x) in arr ": key=" index ": type=" Item "></mz-film> </div></template><script>import {mapactio Ns,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 () {RET Urn {arr:["now-playing", "Coming-soon"]}}, methods:{... mapactions ({change: "Changeaction"}),}, computed: {}, components:{[Banner.name]:banner, [Film.name]:film,}, created () {This.change ()}}</script><s  Tyle>.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> <!--carousel 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 ">  </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.C    om/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 = "s How "> <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= "Mas K "@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: "Homepage", Path: "Home", Name: "Home"}, {Id:Math.random (), Content: "Movie", Path: "/filmlist", Name: "Filmlist"}, {Id:Math.random (), Content: "Cinema", Path: "/cinema", Name: "Cinema"}, {Id:Math.random (), Content: "Mall", Path: "/Home", Name: "A"}, {Id:Math.random (), Content: "My", Path: "/login", Name: "Login"}, {Id:Math.random (), C Ontent: "Card", Path: "/card", NAMe: "Card"},],}, computed:{... mapstate ({isshow: "Isshow"})//Isshow () {//return this. $store. STA    Te.isshow; }}, methods:{... mapmutations ({show: "Showmutation"}),//Show () {//this. $store. Commit ("Showmuta    tion "); }}, created () {}}</script><!--Add "scoped" attribute to limit CSS to this component only--><styl e scoped>.mz-menu {position:fixed;left:0;top:50px;z-index:1000;-height:100%; width:265px;}. Mz-menu ul{width:265px;background: #282828;p osition: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" > <!--is aggressively https://m.maizuo.com/v4/api/film/now-playing?__t= 1533018029103&page=1&count=5-<!--coming soon https://m.maizuo.com/v4/api/film/coming-soon?__t= 1533018029121&page=1&count=3--<ul class= "film" > <router-link tag= "li": to= "{name: ' Filmdet Ail ', params:{id:item.id}} "v-for=" Item in arr ": key=" item.id "> < ;/router-link> </ul> </div></template><script>export Default {name: "Mz-film", props:["t Ype "], 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 cross-domain, Swiper, mobile-side project

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.