Vant 搭建vue+es6+postcss+rem+axios脚手架
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
