vite2.0+vue3移動端專案實戰詳解
阿新 • • 發佈:2021-03-04
一.涉及技術點
- vite版本
- vue3
- ts
- 整合路由
- 整合vuex
- 整合axios
- 配置Vant3
- 移動端適配
- 請求代理
二.步驟
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<RouteRecordRaw> = [ { path: "/",name: "Home",meta: { title: "首頁",keepAlive: true },component: () => import("../views/Home/index.vue"),},{ path: "/login",name: "Login",meta: { title: "登入",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')
配置資料中心vuex(4.x)
安裝
npm i vuex@next --save
配置
在src下建立store目錄,並在store下建立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掛載資料中心
import { createApp } from 'vue' import App from 'http://www.cppcns.com./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版本不需要配置元件的按需載入,因為Vant 3.0 內部所有模組都是基於 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')
移動端適配
安裝postcss-pxtorem
npm install postcss-pxtorem -D
在根目錄下建立postcss.config.js
module.exports = { "plugins": { "postcss-pxtorem": { rootValue: 37.5,// Vant 官方根字型大小是 37.5 propList: ['*'],selectorBlackList: ['.norem'] // 過濾掉.norem-開頭的class,不進行rem轉換 } } }
在根目錄src中新建util目錄下新建rem.ts等比適配檔案
// rem等比適配配置檔案
// 基準大小
const baseSize = 37.5
// 注意此值要與 postcss.config.js 檔案中的 rootValue保持一致
// 設定 rem 函式
function setRem () {
// 當前頁面寬度相對於 37程式設計客棧5寬的縮放比例,可根據自己需要修改,一般設計稿都是寬750(圖方便可以拿到設計圖後改過來)。
const scale = document.documentElement.clientWidth / 375
// 設定頁面根節點字型大小(“Math.min(scale,2)” 指最高放大比例為2,可根據實際業務需求調整)
document.documentElement.style.fontSize = baseSize * Math.min(scale,2) + 'px'
}
// 初始化
setRem()
// 改變視窗大小時重新設定 rem
window.onresize = function () {
console.log("我執行了")
setRem()
}
在mian.ts引入
import "./utils/rem"
配置網路請求axios
安裝
npm i -s axios
配置axios
在src建立utils資料夾,並在utils下建立request.ts
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;
使用
import request from "../utils/request"; request({url: "/profile http://www.cppcns.com",method: "get"}) .then((res)=>{ console.log(res) })
配置請求代理
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')//設定別名 } },server: { port:4000,//啟動埠 open: true,proxy: { // 選項寫法 '/api': 'http://123.56.85.24:5000'//代理網址 },cors:true } })
&nbswww.cppcns.comp;以上,一個最基本的移動端開發配置完成。
三. vite對<script setup> 和<style vars>的支援格外友好
正常寫法
<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>
是不是簡潔了很多
<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專案實戰內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!