vite2.0+vue3移動(dòng)端項(xiàng)目實(shí)戰(zhàn)

關(guān)注公眾號(hào)?前端人，回復(fù)“加群”

添加無(wú)廣告優(yōu)質(zhì)學(xué)習(xí)群

一.涉及技術(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 編寫(xiě)的，天然具備按需引入的能力，但是樣式必須全部引入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)字體大?。ā癕ath.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)寫(xiě)法
??????'/api':?'http://123.56.85.24:5000'//代理網(wǎng)址
????},
????cors:true
??}

})

以上，一個(gè)最基本的移動(dòng)端開(kāi)發(fā)配置完成。

三. vite對(duì)

<strong id="7actg"></strong>

<table id="7actg"></table>

<address id="7actg"></address>

<address id="7actg"></address>

<object id="7actg"><tt id="7actg"></tt></object>

成人三级在线观看一区二区 | 性少妇ⅴ1deosex十r | 国产三级乱伦视频小说 | 国产精品网址 | 人人摸人人操人人干 | a√免费看| 孕妇孕交性一级A片 | 自拍偷拍网站 | 日本免费色 | 另类在线 |