您好,登錄后才能下訂單哦!
怎么在移動(dòng)端項(xiàng)目中使用vite2.0和vue3?相信很多沒有經(jīng)驗(yàn)的人對此束手無策,為此本文總結(jié)了問題出現(xiàn)的原因和解決方法,通過這篇文章希望你能解決這個(gè)問題。
Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架,Vue與其它大型框架的區(qū)別是,使用Vue可以自底向上逐層應(yīng)用,其核心庫只關(guān)注視圖層,方便與第三方庫和項(xiàng)目整合,且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)復(fù)雜的單頁應(yīng)用。
vite版本
vue3
ts
集成路由
集成vuex
集成axios
配置Vant3
移動(dò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<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掛載路由
import { createApp } from 'vue' import App from './App.vue' import router from "./router";createApp(App) .use(router) .mount('#app')
安裝
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')
安裝
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')
安裝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'] // 過濾掉.norem-開頭的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)前頁面寬度相對于 375寬的縮放比例,可根據(jù)自己需要修改,一般設(shè)計(jì)稿都是寬750(圖方便可以拿到設(shè)計(jì)圖后改過來)。 const scale = document.documentElement.clientWidth / 375 // 設(shè)置頁面根節(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"
安裝
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ā)起請求之前的攔截器 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) })
配置請求代理
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)端開發(fā)配置完成。
正常寫法
<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>
看完上述內(nèi)容,你們掌握怎么在移動(dòng)端項(xiàng)目中使用vite2.0和vue3的方法了嗎?如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容,歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。