모바일 개발에 Vue 기술을 사용하는 방법

vue create my-project

import Vue from 'vue'
import Vant from 'vant'
import 'vant/lib/index.css'

Vue.use(Vant)

<template>
  <div class="home">
    <h1>欢迎使用Vue移动端开发</h1>
  </div>
</template>

<script>
export default {
  mounted() {
    console.log('页面加载完成')
  }
}
</script>

<style scoped>
.home {
  text-align: center;
  padding-top: 100px;
  font-size: 20px;
}
</style>

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

<style>
#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;
}
</style>

npm install vue-router --save

import VueRouter from 'vue-router'
import Home from '@/pages/Home.vue'

const routes = [
  {
    path: '/',
    component: Home
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

npm install axios --save

import axios from 'axios'

const instance = axios.create({
  baseURL: 'http://api.example.com',
  timeout: 5000
})

instance.interceptors.request.use(
  config => {
    // 在此处可以添加token等认证信息
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

instance.interceptors.response.use(
  response => {
    // 在此处可以对返回的数据进行处理
    return response.data
  },
  error => {
    return Promise.reject(error)
  }
)

export default instance

import request from '@/api/request'

export default {
  methods: {
    fetchData() {
      request.get('/api/data').then(res => {
        console.log(res)
      }).catch(error => {
        console.log(error)
      })
    }
  }
}