Vant 搭建vue+es6+postcss+rem+axios腳手架

Vant官網(wǎng)
項(xiàng)目GItHub
項(xiàng)目預(yù)覽

1.目錄結(jié)構(gòu)

1565077246(1).png

2. 使用rem

npm install postcss-pxtorem
npm install lib-flexible

安裝完成后文件目錄中會出現(xiàn)postcss.config.js在其中添加

module.exports = {
  plugins: {
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 7']
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*']
    }
  }
}

3. 封裝axios

request.js

import axios from 'axios'

// create an axios instance
const service = axios.create({
  baseURL: '',
  timeout: 5000
})

// request interceptor
service.interceptors.request.use(
  config => {
    /* if (store.getters.token) {
      config.headers['X-Token'] = '' // 添加token
    } */
    return config
  },
  error => {
    Promise.reject(error)
  }
)

// response interceptor
service.interceptors.response.use(
  response => response, // 這里可以自由發(fā)揮怎樣去攔截處理后臺數(shù)據(jù)
  error => {
    // const { data } = error.response
    return Promise.reject(error)
  }
)

export default service

4.和服務(wù)端聯(lián)調(diào)services

import request from '../utils/request'

export function fetchList () {
  const query = {
    page: 1,
    count: 2,
    type: 'video'
  }
  return request({
    url: '/getJoke',
    method: 'get',
    params: query
  })
}

5.路由配置

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/login',
      name: 'ligon',
      component: () => import('./views/Login.vue')
    },
    {
      path: '/',
      name: 'tabs',
      redirect: '/home',
      component: () => import('./views/Tabs.vue'),
      children: [
        {
          path: '/home',
          name: 'home',
          component: Home
        },
        {
          path: '/about',
          name: 'about',
          // route level code-splitting
          // this generates a separate chunk (about.[hash].js) for this route
          // which is lazy-loaded when the route is visited.
          component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
        }
      ]
    }

  ]
})

6.效果

登錄頁面，隨便寫了一個(gè)登錄按鈕

1565077959(1).jpg