基于Vite2.x的Vue 3.x項目的搭建實現(xiàn)
更新時間：2021年04月30日 09:54:29 作者：不二博客
這篇文章主要介紹了基于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 方法設置哈希模式與歷史模式。
const router = createRouter({
history: createWebHashHistory(), // 哈希模式
history: createWebHistory(), // 歷史模式
});
相對路徑配置
在之前的 VueCli 中，我們得益于 WebPack 進行打包工具可以直接使用特定符號表示當前路徑。同樣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="標題" left-text="返回" right-text="按鈕" left-arrow fixed @click-left="onClickLeft" @click-right="onClickRight" />
<van-nav-bar title="標題" 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 全局應用后在就不能局部引用，否則 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,
};
}
});
到此這篇關于基于Vite2.x的Vue 3.x項目的搭建實現(xiàn)的文章就介紹到這了,更多相關vite 搭建vue3項目內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了AntV F2和vue-cli構建移動端可視化視圖過程詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-10-10
這篇文章主要介紹了vue.js父子組件傳參的原理與實現(xiàn)方法,結合實例形式分析了vue.js父子組件傳參的基本原理、實現(xiàn)方法與相關操作注意事項,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了vue?tree封裝一個可選的樹組件方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
本篇文章主要介紹了 vue中的event bus非父子組件通信解析 ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要介紹了vue封裝一個彈幕組件詳解，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙可以參考一下2022-08-08
今天小編就為大家分享一篇vue監(jiān)聽input標簽的value值方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
最近項目中有用到json編輯器,我選用了這款vue的編輯器,看起來也是比較簡潔,接下來就具體介紹一下它,下面這篇文章主要給大家介紹了關于VUE3使用JSON編輯器的詳細圖文教程,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了vue如何使用媒體查詢實現(xiàn)響應式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
watch 是由用戶定義的數(shù)據(jù)監(jiān)聽，當監(jiān)聽的屬性發(fā)生改變就會觸發(fā)回調(diào)，這項配置在業(yè)務中是很常用。在面試時，也是必問知識點，一般會用作和 computed 進行比較。那么本文就來帶大家從源碼理解 watch 的工作流程，以及依賴收集和深度監(jiān)聽的實現(xiàn)2022-10-10
這篇文章主要介紹了vue init失敗的簡單解決方法-終極版,需要的朋友可以參考下2017-12-12