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

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

Vant官网
项目GItHub
项目预览

1.目录结构

1565077246(1).png

2. 使用rem

npm install postcss-pxtorem
npm install lib-flexible

安装完成后文件目录中会出现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, // 这里可以自由发挥怎样去拦截处理后台数据
  error => {
    // const { data } = error.response
    return Promise.reject(error)
  }
)

export default service

4.和服务端联调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.效果

登录页面，随便写了一个登录按钮

1565077959(1).jpg