??? ???? ??? ?? ?? ? ?? ????? ??????? ??? ??? ???? ???. ?? ???? ????? ?????? Vue? ??? ????? ??? ??? ??? ?? ??? ??? ?????? ???? ? ??? ? ? ????. ? ????? Vue? ???? ??? ??? ?????? ???? ??? ?????.

1. ??? px ?? rem? ?????

??? ??????? px? ??? ???? ??? ???? ?? ??? ???? ?? ? ????. ??? ??? px ?? rem? ???? ?? ????. rem? ?? ??? ???? ? ?? ??? ???? ?? ??? ?? ???? ??? ??? ? ????.

?? html ??? ?? ??? ?? ??? 1/10? ?????. ?:

html{
    font-size: calc(100vw / 10);
}

??? ?? ?? ??? 375px? ??? ?? ?? ??? 37.5px? ?????. . ?? ?????? rem? ??? ??? ? ????. ?:

.container{
    width: 7.5rem; // 相當于屏幕寬度的75%
    font-size: 0.14rem; // 相當于14px
}

2. Flexbox ???? ??

Flexbox ????? ??? ??? ?? ?? ? ?? ??? ???? ?????. Vue ??????? Vue? ?? ?? ??? v-layout ? v-flex? ???? Flexbox ????? ??? ? ????.

?? npm ??? ?? ??? ? ?? Vuetify? ????? ?????.

npm install vuetify --save

?? ?? main.js? Vuetify? ???? ?????.

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
Vue.use(Vuetify)

????? Vue?? v-layout ? v-flex ?? ??? ?????. Flexbox ????? ?????. ?:

<template>
  <v-layout row wrap>
    <v-flex xs12 sm6 md4 lg3>Item 1</v-flex>
    <v-flex xs12 sm6 md4 lg3>Item 2</v-flex>
    <<v-flex xs12 sm6 md4 lg3>Item 3</v-flex>
    <v-flex xs12 sm6 md4 lg3>Item 4</v-flex>
  </v-layout>
</template>

<script>
export default {
  name: 'MyComponent',
  components: {
    VLayout,
    VFlex
  }
}
</script>

? ??? ?? ?? ??? 4? ??? ?? ?? ?? ??? ????? ?? ?????.

3. Vue? ?? ?? ??

??? ??????? ?? ??? ??? ??? ?? ???? ? ????. Vue? ??? ??? ???????? ??? ? ?? ?? ??? ?? ?? ?? ?? v-transition ? v-animation? ?????.

?? npm ??? ?? ??? ? ?? animate.css ?????? ????? ?????.

npm install animate.css --save

?? ?? Vue ?? ???? v-transition? ???? ?? ??? ????. ?:

<template>
  <div>
    <transition :name="transitionName">
      <div v-if="show" class="animated" ref="box"></div>
    </transition>
    <button @click="toggle">Toggle</button>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  data() {
    return {
      show: false,
      transitionName: 'fade'
    }
  },
  methods: {
    toggle() {
      this.show = !this.show
    }
  }
}
</script>

<style>
.animated {
  animation-duration: 1s;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 1s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

? ??? ?? ??? ???? ??? ? ? ??? ?? ?? ??? ??? ?????.

4. vue-router? ???? ??? ?? ??

??? ??????? ??? ??? ?? ??? ???? ???. Vue? ??? ?? ? ?? ???? ???? ?? vue-router? ?????.

?? npm ??? ?? ??? ? ?? vue-router? ????? ?????.

npm install vue-router --save

?? ?? main.js?? ??? ???? vue-router? ?????.

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './views/Home.vue'
Vue.use(VueRouter)
const router = new VueRouter({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
    }
  ]
})
new Vue({
  router
}).$mount('#app')

????? router-link ?? ??? ?????. Vue ?? ???? ??? ?????. ?:

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
  </div>
</template>

? ??? ????? ? ? ?? ???? ???? ?? ??? ??? ???? ?????.

??

? ???? Vue? ???? ??? ??? ?????? ???? ??? ?????. ?????? px ?? rem? ??? ????, Flexbox ????? ????, Vue? ?? ??? ????, vue-router? ???? ??? ??? ???? ?? ?????. ??? ??? ??? ??? ?????? ???? ??? ??? ?? ???? ???? ??? ? ??? ? ? ????.

? ??? Vue? ??? ??? ?????? ???? ??? ??????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!