基于 Vite 2.x 的 Vue 3.x 项目的搭建

迷南。 2022-11-06 15:00 109阅读 0赞

**创建 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`，用于创建路由。

// 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 内部所有模块都是基于 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` 函数，但是在 `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,
          };
       }
    });