基于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ù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: