一.涉及技術點
- vite版本
- vue3
- ts
- 集成路由
- 集成vuex
- 集成axios
- 配置Vant3
- 移動端適配
- 請求代理
二.步驟
vite+ts+vue3只需要一行命令
|
1
|
npm init @vitejs/app my-vue-app --template vue-ts |
配置路由
|
1
|
npm install vue-router@4 --save |
在src下新建router目錄，新建index.ts文件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";const routes: Array<RouteRecordRaw> = [ { path: "/", name: "Home", meta: { title: "首頁", 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掛載路由
|
1
2
3
4
5
|
import { createApp } from 'vue'import App from './App.vue'import router from "./router";createApp(App).use(router).mount('#app') |
配置數據中心vuex（4.x）
安裝
|
1
|
npm i vuex@next --save |
配置
在src下創建store目錄，并在store下創建index.ts
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
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掛載數據中心
|
1
2
3
4
5
6
7
8
|
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
安裝
|
1
|
npm i vant@next -S |
vite版本不需要配置組件的按需加載，因為Vant 3.0 內部所有模塊都是基于 ESM 編寫的，天然具備按需引入的能力，但是樣式必須全部引入137.2k
在main.ts全局引入樣式
|
1
2
3
4
5
6
7
8
9
10
|
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') |
移動端適配
安裝postcss-pxtorem
|
1
|
npm install postcss-pxtorem -D |
在根目錄下創建postcss.config.js
|
1
2
3
4
5
6
7
8
9
10
11
|
module.exports = { "plugins": { "postcss-pxtorem": { rootValue: 37.5, // Vant 官方根字體大小是 37.5 propList: ['*'], selectorBlackList: ['.norem'] // 過濾掉.norem-開頭的class，不進行rem轉換 } }} |
在根目錄src中新建util目錄下新建rem.ts等比適配文件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
// rem等比適配配置文件// 基準大小const baseSize = 37.5 // 注意此值要與 postcss.config.js 文件中的 rootValue保持一致// 設置 rem 函數function setRem () { // 當前頁面寬度相對于 375寬的縮放比例，可根據自己需要修改,一般設計稿都是寬750(圖方便可以拿到設計圖后改過來)。 const scale = document.documentElement.clientWidth / 375 // 設置頁面根節點字體大小（“Math.min(scale, 2)” 指最高放大比例為2，可根據實際業務需求調整） document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'}// 初始化setRem()// 改變窗口大小時重新設置 remwindow.onresize = function () { console.log("我執行了") setRem()} |
在mian.ts引入
|
1
|
import "./utils/rem" |
配置網絡請求axios
安裝
|
1
|
npm i -s axios |
配置axios
在src創建utils文件夾,并在utils下創建request.ts
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
import axios from "axios";const service = axios.create({ baseURL, timeout: 5000 // request timeout});// 發起請求之前的攔截器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));// 響應攔截器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; |
使用
|
1
2
3
4
5
|
import request from "../utils/request";request({url: "/profile ",method: "get"}).then((res)=>{ console.log(res)}) |
配置請求代理
vite.config.ts
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
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')//設置別名 } }, server: { port:4000,//啟動端口 open: true, proxy: { // 選項寫法 '/api': 'http://123.56.85.24:5000'//代理網址 }, cors:true } }) |
以上，一個最基本的移動端開發配置完成。
三. vite對<script setup> 和<style vars>的支持格外友好
正常寫法
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<script lang="ts">import { defineComponent } from "vue";import { useRouter } from "vue-router";export default defineComponent({ setup() { const router = useRouter(); const goLogin = () => { router.push("/"); }; return { goLogin }; },});</script><script setup>寫法<script lang="ts" setup="props">import { useRouter } from "vue-router";const router = useRouter();const goLogin = () => { router.push("/");};</script> |
是不是簡潔了很多
|
1
2
3
4
5
6
7
8
9
10
11
|
<style vars>如何用？<script lang="ts" setup="props">const state = reactive({ color: "#ccc",});</script><style >.text { color: v-bind("state.color");}</style> |
就這么簡單！
代碼
原文地址：zhuanlan.zhihu.com/p/351888882
線上預覽：http://123.56.85.24/vite/#/
代碼地址：github.com/huoqingzhu/vue3-vite-ts-Vant
vitejs中文網:https://cn.vitejs.dev/
到此這篇關于vite2.0+vue3移動端項目實戰詳解的文章就介紹到這了,更多相關vite2.0+vue3項目實戰內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://blog.csdn.net/xgangzai/article/details/113930896
