移动端开发技术

移动端开发流程

1.项⽬创建

vuecreateproject

…

+postcss-plugin-px2rem

安装：cnpminstalllib-flexiblepostcss-plugin-px2rem--save-dev

配置rem：导⼊：import‘lib-flexible/flexible’;rem可以⽣效了

配置px—>rem:创建

s={

css:{

loaderOptions:{

postcss:{

plugins:[

require('postcss-plugin-px2rem')({

rootValue:75,//换算基数，默认100，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上p

x了。

//unitPrecision:5,//允许REM单位增长到的⼗进制数字。

//propWhiteList:[],//默认值是⼀个空数组，这意味着禁⽤⽩名单并启⽤所有属性。

//propBlackList:[],//⿊名单

//exclude:/(page_pc)/i,//默认false，可以（reg）利⽤正则表达式排除某些⽂件夹的⽅法，例如/(node_module)/。如果想把前端UI框架内的p

x也转换成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

}),

]

}

}

},

}

的使⽤

安装：cnpmivant--save-dev

选择引⼊⽅式（推荐按需引⼊）：

cnpmibabel-plugin-import-D

配置：中配置

constplugins=[

[

'import',

{

libraryName:'vant',

libraryDirectory:'es',

style:true

},

'vant'

]

]

s={

presets:['@vue/cli-plugin-babel/preset'],

plugins

}

使⽤：创建plugins—>

//按需全局引⼊vant组件

importVuefrom'vue'

import{Button,List,Cell,Tabbar,TabbarItem}from'vant'

(Button)

(Cell)

(List)

(Tabbar).use(TabbarItem)

导⼊

//全局引⼊按需引⼊UI库vant

import'@/plugins/vant'

组件中使⽤：

的初始化

assetes—>css

初始化css样式

公⽤的类

导⼊的主css

//引⼊全局样式

import‘@/assets/css/’

5.⽬录创建

创建views(⼤的页⾯级的组件)

home⾸页

category分类

cart购物车

myself个⼈中⼼

detail详情

layouts布局

reouter-view

layouts—>router-view+tab-bar

6.路由配置

router—>

importVuefrom'vue'

importVueRouterfrom'vue-router'

(VueRouter)

constroutes=[

{

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}

}

]

}

]

constrouter=newVueRouter({

mode:'hash',

routes

})

exportdefaultrouter

-bar组件的开发

的开发

8.1axios拦截,api封装

axios拦截创建utils---》

importaxiosfrom'axios'

importstorefrom'@/store'

import{Toast}from'vant'

//根据环境不同引⼊不同api地址

//import{baseApi}from'@/config'

constbaseApi='http://123.207.32.32:8000/api/x6'

//createanaxiosinstance

constservice=({

baseURL:baseApi,//url=baseapiurl+requesturl

withCredentials:true,//sendcookieswhencross-domainrequests

timeout:5000//requesttimeout

})

//request拦截器requestinterceptor

(

config=>{

//不传递默认开启loading

if(!ading){

//loading

g({

forbidClick:true

})

}

if(){

s['X-Token']=''

}

returnconfig

},

error=>{

//dosomethingwithrequesterror

(error)//fordebug

(error)

}

)

//respone拦截器

(

response=>{

()

constres=

if(&&!==200){

//登录超时,重新登录

if(===401){

ch('FedLogOut').then(()=>{

()

})

}

(res||'error')

}else{

e(res)

}

},

error=>{

()

('err'+error)//fordebug

(error)

}

)

exportdefaultservice

8.2api封装

创建api⽬录—>+

constapi={

homeList:'/home/multidata',

shopType:'/home/data',

detail:'/detail'

}

s=api

import{homeList,shopType,detail}from'./index'

//axios

importrequestfrom'@/utils/request'

//获取⾸页数据

exportfunctiongetHomeList(params={}){

returnrequest({

url:homeList,

method:'get',

params,

hideloading:false

})

}

//获取商品分类

exportfunctiongetTypeList(params={type:"pop",page:1}){

returnrequest({

url:shopType,

method:'get',

params

})

}

//详情

exportfunctiongetDetail(params={}){

returnrequest({

url:detail,

method:'get',

params,

hideloading:true

})

}

9.组件中使⽤api⽅法

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

create(){

getHomeList().then(res=>{

=

})

}

组件