Implementation of Vue 3.x project based on Vite2.x

Creating a Vue 3.x Project

npm init @vitejs/app my-vue-app --template

Introducing Router 4.x

npm install vue-router@4 --save

Configuring Routes

Add a router folder in the directory and create index.js

Router 4.x provides us with createRouter instead of new VueRouter in Router 3.x for creating routes.

// 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 provides us with createWebHashHistory and createWebHistory methods to set hash mode and history mode.

const router = createRouter({
  history: createWebHashHistory(), // Hash mode history: createWebHistory(), // History mode });

Relative path configuration

In the previous VueCli, we benefited from the WebPack packaging tool and could directly use specific symbols to represent the current path. Similarly, Vite also provides us with the resolve.alias property.

// 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()],
  // Define relative path, @ replaces resolve: {
    alias: {
      '@': resolve(__dirname, 'src')
    }
  }
})

Import Vuex

After introducing Vuex, create a new file src/store/index.ts in the directory.

npm i vuex@next --save

Vant Introduction

download

npm install vant@next --save

The vite version does not need to configure on-demand loading of components, because all modules inside Vant 3.0 are written based on ESM and naturally have the ability to be introduced on demand, but all styles must be introduced.

//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"; // Global import style createApp(App).use(router).use(store).use(Vant).mount("#app");

Since the setup function is added in Vue 3.x, but this in the setup refers to undefined, some global methods of Vant cannot be used.

<template>
   <div>
      <van-nav-bar title="Title" left-text="Back" right-text="Button" left-arrow fixed @click-left="onClickLeft" @click-right="onClickRight" />
      <van-nav-bar title="Title" left-text="Back" right-text="Button" left-arrow @click-left="onClickLeft" @click-right="onClickRight" />
   </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
   setup() {
      const onClickLeft = () => Toast("Return");
      const onClickRight = () => Toast("button");
      return {
         onClickLeft,
         onClickRight,
      };
   },
});
</script>

In the above example, Toast is not defined because after applying Vant globally, it cannot be referenced locally, otherwise Vite will report an error.

This problem can be solved by writing a tool class to encapsulate Toast again.

// utils/util.ts
// Simple pop-up window 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("Return");
      const onClickRight = () => toast("button");
      return {
         onClickLeft,
         onClickRight,
      };
   }
});

This is the end of this article about the construction and implementation of Vue 3.x project based on Vite2.x. For more relevant vite construction vue3 project content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in: