移动端开发流程

1. 项目创建

vue create project
…

2. rem + postcss-plugin-px2rem

安装：cnpm install lib-flexible postcss-plugin-px2rem --save-dev

配置rem：main.js 导入： import ‘lib-flexible/flexible’; rem 可以生效了

配置px—>rem: 创建vue.config.js

module.exports = {
   
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require('postcss-plugin-px2rem')({
                        rootValue:75, //换算基数， 默认100  ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。
                        // unitPrecision: 5, //允许REM单位增长到的十进制数字。
                        //propWhiteList: [],  //默认值是一个空数组，这意味着禁用白名单并启用所有属性。
                        // propBlackList: [], //黑名单
                        // exclude: /(page_pc)/i,  //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
                        exclude: /node_modules/i,
                        // selectorBlackList: ['van-'], //要忽略并保留为px的选择器,我们一般不转换vantui中的大小
                        // ignoreIdentifier: false,  //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
                        // replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
                        mediaQuery: false,  //（布尔值）允许在媒体查询中转换px。
                        minPixelValue: 3 //设置要替换的最小像素值(3px会被转rem)。 默认 0
                    }),
                ]
            }
        }
    },
}

3. vantui的使用

安装： cnpm i vant --save-dev

选择引入方式（推荐按需引入）：
cnpm i babel-plugin-import -D

配置：babel.config.js 中配置

const plugins = [
  [
    'import',
    {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    },
    'vant'
  ]
]


module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  plugins
}

使用：创建 plugins—>vant.js

// 按需全局引入 vant组件
import Vue from 'vue'
import { Button, List, Cell, Tabbar, TabbarItem} from 'vant'
Vue.use(Button)
Vue.use(Cell)
Vue.use(List)
Vue.use(Tabbar).use(TabbarItem)

导入main.js

// 全局引入按需引入UI库 vant
import '@/plugins/vant'

组件中使用：
home.vue

<template>
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
</template>

4. css的初始化

assetes—>css

reset.css 初始化css样式
minxin.css 公用的类
index.css 导入的主css

main.js

// 引入全局样式
import ‘@/assets/css/index.css’

5. 目录创建

创建views (大的页面级的组件)

home 首页
category 分类
cart 购物车
myself 个人中心
detail 详情
layouts 布局

App.vue
reouter-view

layouts—> router-view+tab-bar

6. 路由配置

router—>index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    component: () => import('@/views/layouts/index'),
    redirect: '/home',
    meta: {
      title: '首页',
      keepAlive: false
    },
    children: [
      {
        path: '/home',
        name: 'Home',
        component: () => import('@/views/home/index'),
        meta: { title: '首页', keepAlive: false }
      },
      {
        path:'/category',
        name:'Category',
        component:()=>import('@/views/category/category'),
        meta:{title:'分类', keepAlive:false}
      },
      {
        path:'/cart',
        name:'Cart',
        component:()=>import('@/views/cart/cart'),
        meta:{title:'购物车', keepAlive:false}
      },
      {
        path:'/myself',
        name:'Myself',
        component:()=>import('@/views/myself/myself'),
        meta:{title:'个人中心', keepAlive:false}
      },
      {
        path: '/detail',
        name: 'Detail',
        component: () => import('@/views/detail/detail'),
        meta: { title: '详情', keepAlive: false }
      }
    ]
  }
]

const router = new VueRouter({
  mode:'hash',
  routes
})

export default router

7.tab-bar 组件的开发

8. home.vue的开发

8.1 axios拦截 , api封装

       axios拦截 创建 utils---》reques.js

import axios from 'axios'
import store from '@/store'
import { Toast } from 'vant'
// 根据环境不同引入不同api地址
// import { baseApi } from '@/config'
const baseApi = 'http://123.207.32.32:8000/api/x6' 
// create an axios instance
const service = axios.create({
  baseURL: baseApi, // url = base api url + request url
  withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // request timeout
})

// request拦截器 request interceptor
service.interceptors.request.use(
  config => {
    // 不传递默认开启loading
    if (!config.hideloading) {
      // loading
      Toast.loading({
        forbidClick: true
      })
    }
    if (store.getters.token) {
      config.headers['X-Token'] = ''
    }
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)
// respone拦截器
service.interceptors.response.use(
  response => {
    Toast.clear()
    const res = response.data
    if (res.status && res.status !== 200) {
      // 登录超时,重新登录
      if (res.status === 401) {
        store.dispatch('FedLogOut').then(() => {
          location.reload()
        })
      }
      return Promise.reject(res || 'error')
    } else {
      return Promise.resolve(res)
    }
  },
  error => {
    Toast.clear()
    console.log('err' + error) // for debug
    return Promise.reject(error)
  }
)

export default service

8.2 api封装

创建 api目录 —>index.js+api.js

index.js

const api = {
  homeList: '/home/multidata',
  shopType: '/home/data',
  detail: '/detail'
}

module.exports=api

api.js

import { homeList,shopType,detail } from './index'
// axios
import request from '@/utils/request'

// 获取首页数据
export function getHomeList(params={}) {
  return request({
    url: homeList,
    method: 'get',
    params,
    hideloading: false
  })
}

// 获取商品分类
export function getTypeList(params={type:"pop",page:1}) {
  return request({
    url: shopType,
    method: 'get',
    params
  })
}

// 详情
export function getDetail(params={}) {
  return request({
    url: detail,
    method: 'get',
    params,
    hideloading: true
  })
}

9.组件中使用api方法

import {getHomeList,getTypeList} from '@/api/user'

create(){
getHomeList().then(res=>{
   this.xxx=res.data
})

}

10. list组件

详见https://blog.csdn.net/weixin_43638968/article/details/108267118