移动端开发流程

旧城等待， 2022-12-01 15:49 203阅读 0赞

### 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

### 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][https_blog.csdn.net_weixin_43638968_article_details_108267118]

[https_blog.csdn.net_weixin_43638968_article_details_108267118]: https://blog.csdn.net/weixin_43638968/article/details/108267118