vite2.0+vue3移動(dòng)端項(xiàng)目實(shí)戰(zhàn)
關(guān)注公眾號(hào)?程序員成長(zhǎng)指北，回復(fù)“1”
添加無(wú)廣告優(yōu)質(zhì)學(xué)習(xí)群
原文地址：zhuanlan.zhihu.com/p/351888882
作者：清風(fēng)皓月
一.涉及技術(shù)點(diǎn)
vite版本 vue3 ts 集成路由 集成vuex 集成axios 配置Vant3 移動(dòng)端適配 請(qǐng)求代理
二.步驟
vite+ts+vue3只需要一行命令
npm?init?@vitejs/app?my-vue-app?--template?vue-ts
配置路由
npm?install?vue-router@4?--save
在src下新建router目錄，新建index.ts文件
import?{?createRouter,?createWebHashHistory,?RouteRecordRaw?}?from?"vue-router";
const?routes:?Array?=?[
??{
????path:?"/",
????name:?"Home",
????meta:?{
??????title:?"首頁(yè)",
??????keepAlive:?true
????},
????component:?()?=>?import("../views/Home/index.vue"),
??},
??{
????path:?"/login",
????name:?"Login",
????meta:?{
??????title:?"登錄",
??????keepAlive:?true
????},
????component:?()?=>?import("../views/Login/index.vue"),
??},
];
const?router?=?createRouter({
??history:?createWebHashHistory(),
??routes
});
export?default?router;
在main.ts掛載路由
import?{?createApp?}?from?'vue'
import?App?from?'./App.vue'
import?router?from?"./router";createApp(App)
.use(router)
.mount('#app')
配置數(shù)據(jù)中心vuex（4.x）
安裝
npm?i?vuex@next?--save
配置
在src下創(chuàng)建store目錄，并在store下創(chuàng)建index.ts
import?{?createStore?}?from?"vuex";
export?default?createStore({
??state:?{
????listData:{1:10},
????num:10
??},
??mutations:?{
????setData(state,value){
????????state.listData=value
????},
????addNum(state){
??????state.num=state.num+10
????}
??},
??actions:?{
????setData(context,value){
??????context.commit('setData',value)
????},
??},
??modules:?{}
});
掛載
在main.ts掛載數(shù)據(jù)中心
import?{?createApp?}?from?'vue'
import?App?from?'./App.vue'
import?router?from?"./router";
import?store?from?"./store";
createApp(App)
.use(router)
.use(store)
.mount('#app')
Vant3
安裝
npm?i?vant@next?-S
vite版本不需要配置組件的按需加載，因?yàn)閂ant 3.0 內(nèi)部所有模塊都是基于 ESM 編寫的，天然具備按需引入的能力，但是樣式必須全部引入137.2k
在main.ts全局引入樣式
import?{?createApp?}?from?'vue'
import?App?from?'./App.vue'
import?router?from?"./router";
import?store?from?"./store";
import?'vant/lib/index.css';?//?全局引入樣式
createApp(App)
.use(router)
.use(store)
.use(ant)
.mount('#app')
移動(dòng)端適配
安裝postcss-pxtorem
npm?install?postcss-pxtorem?-D
在根目錄下創(chuàng)建postcss.config.js
module.exports?=?{
??"plugins":?{
????"postcss-pxtorem":?{
??????rootValue:?37.5,?
??????//?Vant?官方根字體大小是?37.5
??????propList:?['*'],
??????selectorBlackList:?['.norem']?
??????//?過(guò)濾掉.norem-開(kāi)頭的class，不進(jìn)行rem轉(zhuǎn)換
????}
??}
}
在根目錄src中新建util目錄下新建rem.ts等比適配文件
//?rem等比適配配置文件
//?基準(zhǔn)大小
const?baseSize?=?37.5?
//?注意此值要與?postcss.config.js?文件中的?rootValue保持一致
//?設(shè)置?rem?函數(shù)
function?setRem?()?{
??//?當(dāng)前頁(yè)面寬度相對(duì)于 375寬的縮放比例，可根據(jù)自己需要修改,一般設(shè)計(jì)稿都是寬750(圖方便可以拿到設(shè)計(jì)圖后改過(guò)來(lái))。
??const?scale?=?document.documentElement.clientWidth?/?375
??//?設(shè)置頁(yè)面根節(jié)點(diǎn)字體大小（“Math.min(scale,?2)”?指最高放大比例為2，可根據(jù)實(shí)際業(yè)務(wù)需求調(diào)整）
??document.documentElement.style.fontSize?=?baseSize?*?Math.min(scale,?2)?+?'px'
}
//?初始化
setRem()
//?改變窗口大小時(shí)重新設(shè)置?rem
window.onresize?=?function?()?{
??console.log("我執(zhí)行了")
??setRem()
}
在mian.ts引入
import?"./utils/rem"
配置網(wǎng)絡(luò)請(qǐng)求axios
安裝
npm?i?-s?axios
配置axios
在src創(chuàng)建utils文件夾,并在utils下創(chuàng)建request.ts
import?axios?from?"axios";
const?service?=?axios.create({
??baseURL,
??timeout:?5000?//?request?timeout
});
//?發(fā)起請(qǐng)求之前的攔截器
service.interceptors.request.use(
??config?=>?{
????//?如果有token?就攜帶tokon
????const?token?=?window.localStorage.getItem("accessToken");
????if?(token)?{
??????config.headers.common.Authorization?=?token;
????}
????return?config;
??},
??error?=>?Promise.reject(error)
);
//?響應(yīng)攔截器
service.interceptors.response.use(
??response?=>?{
????const?res?=?response.data;
????if?(response.status?!==?200)?{
??????return?Promise.reject(new?Error(res.message?||?"Error"));
????}?else?{
??????return?res;
????}
??},
??error?=>?{
????return?Promise.reject(error);
??}
);
export?default?service;
使用
import?request?from?"../utils/request";
request({url:?"/profile?",method:?"get"})
.then((res)=>{
??console.log(res)
})
配置請(qǐng)求代理
vite.config.ts
import?{?defineConfig?}?from?'vite'
import?vue?from?'@vitejs/plugin-vue'
import?path?from?'path';
//?https://vitejs.dev/config/
export?default?defineConfig({
??plugins:?[vue()],
??base:"./",//打包路徑
??resolve:?{
????alias:{
??????'@':?path.resolve(__dirname,?'./src')//設(shè)置別名
????}
??},
??server:?{
????port:4000,//啟動(dòng)端口
????open:?true,
????proxy:?{
??????//?選項(xiàng)寫法
??????'/api':?'http://123.56.85.24:5000'//代理網(wǎng)址
????},
????cors:true
??}
})
以上，一個(gè)最基本的移動(dòng)端開(kāi)發(fā)配置完成。
三. vite對(duì)
<kbd id="afajh"><form id="afajh"></form></kbd> <strong id="afajh"><dl id="afajh"></dl></strong>
<del id="afajh"><form id="afajh"></form></del>
<th id="afajh"><progress id="afajh"></progress></th>
<b id="afajh"><abbr id="afajh"></abbr></b>
<th id="afajh"><progress id="afajh"></progress></th>
<b id="afajh"><abbr id="afajh"></abbr></b>