基于Vite2.x的Vue 3.x項目的搭建實現(xiàn)
創(chuàng)建 Vue 3.x 項目
npm init @vitejs/app my-vue-app --template
引入 Router 4.x
npm install vue-router@4 --save
配置路由
在更目錄中添加一個 router 的文件夾,新建 index.js
Router 4.x 為我們提供了 createRouter 代替了 Router 3.x 中的 new VueRouter,用于創(chuàng)建路由。
// Router 4.x import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router"; const routes: Array<RouteRecordRaw> = [ { path: "/", name: "Home", component: () => import("../views/Home/index.vue"), }, { path: "/login", name: "Login", component: () => import("../views/Login/index.vue"), }, ]; const router = createRouter({ history: createWebHashHistory(), routes }); export default router;
Router 4.x 中為我們提供了 createWebHashHistory 與 createWebHistory 方法設(shè)置哈希模式與歷史模式。
const router = createRouter({ history: createWebHashHistory(), // 哈希模式 history: createWebHistory(), // 歷史模式 });
相對路徑配置
在之前的 VueCli 中,我們得益于 WebPack 進行打包工具可以直接使用特定符號表示當(dāng)前路徑。同樣Vite 也為我們提供了 resolve.alias 屬性。
// vite.config.ts import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' const { resolve } = require('path') // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue()], // 定義相對路徑,@代替 resolve: { alias: { '@': resolve(__dirname, 'src') } } })
引入 Vuex
引入 Vuex 后 在更目錄新建文件 src/store/index.ts 文件。
npm i vuex@next --save
Vant 引入
下載
npm install vant@next --save
vite 版本不需要配置組件的按需加載,因為Vant 3.0 內(nèi)部所有模塊都是基于 ESM 編寫的,天然具備按需引入的能力,但是樣式必須全部引入。
// main.ts import { createApp } from "vue"; import App from "./App.vue"; import router from "./router"; import store from "./store"; import Vant from "Vant"; import "vant/lib/index.css"; // 全局引入樣式 createApp(App).use(router).use(store).use(Vant).mount("#app");
由于 Vue 3.x 中新增了 setup 函數(shù),但是在 setup 中 this 的指向為 undefined ,故 Vant 的一些全局方法無法使用。
<template> <div> <van-nav-bar title="標(biāo)題" left-text="返回" right-text="按鈕" left-arrow fixed @click-left="onClickLeft" @click-right="onClickRight" /> <van-nav-bar title="標(biāo)題" left-text="返回" right-text="按鈕" left-arrow @click-left="onClickLeft" @click-right="onClickRight" /> </div> </template> <script lang="ts"> import { defineComponent } from "vue"; export default defineComponent({ setup() { const onClickLeft = () => Toast("返回"); const onClickRight = () => Toast("按鈕"); return { onClickLeft, onClickRight, }; }, }); </script>
以上的實例中 Toast is not defined,原因就在于我們將 Vant 全局應(yīng)用后在就不能局部引用,否則 Vite 會報錯。
通過編寫 工具類二次封裝 Toast 即可解決此問題。
// utils/util.ts // 簡易彈窗 import { Toast } from "Vant"; export const toast = (text: string) => { Toast(text); };
import { defineComponent } from "vue"; import { toast } from "@/utils/util"; export default defineComponent({ setup() { const onClickLeft = () => toast("返回"); const onClickRight = () => toast("按鈕"); return { onClickLeft, onClickRight, }; } });
到此這篇關(guān)于基于Vite2.x的Vue 3.x項目的搭建實現(xiàn)的文章就介紹到這了,更多相關(guān)vite 搭建vue3項目內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
關(guān)于vue-cli-service:command?not?found報錯引發(fā)的實戰(zhàn)案例
這篇文章主要給大家介紹了關(guān)于vue-cli-service:command?not?found報錯引發(fā)的相關(guān)資料,文中通過實例代碼將解決的過程介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2023-02-02vue 封裝導(dǎo)出Excel數(shù)據(jù)的公共函數(shù)的方法
本文主要介紹了vue 封裝導(dǎo)出Excel數(shù)據(jù)的公共函數(shù),文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-09-09Vue3?攜手?TypeScript?搭建完整項目結(jié)構(gòu)
TypeScript 是JS的一個超級,主要提供了類型系統(tǒng)和對ES6的支持,使用 TypeScript 可以增加代碼的可讀性和可維護性,在 react 和 vue 社區(qū)中也越來越多人開始使用TypeScript,這篇文章主要介紹了Vue3?攜手?TypeScript?搭建完整項目結(jié)構(gòu),需要的朋友可以參考下2022-04-04vue中的base64圖片轉(zhuǎn)網(wǎng)絡(luò)URL方式
在Vue中,可以直接將Base64編碼的圖片賦值給img元素的src屬性,此外,也可以通過JavaScript的URL.createObjectURL()方法將Base64轉(zhuǎn)換為Blob URL,進而轉(zhuǎn)換為File對象,并可進一步轉(zhuǎn)換為PNG或其他格式的圖片,這種轉(zhuǎn)換技術(shù)在前端開發(fā)中非常實用2024-10-10詳解vuex中mapState,mapGetters,mapMutations,mapActions的作用
這篇文章主要介紹了vuex中mapState,mapGetters,mapMutations,mapActions的作用,需要的朋友可以參考下2018-04-04