拿破仑全面战争修改器-测试电脑性能的软件
![移动端开发技术](/uploads/image/0188.jpg)
2023年4月5日发(作者:photoshop8 0破解版)
移动端开发流程
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=>{
=
})
}
组件
更多推荐
移动端开发技术
发布评论