Construction and implementation of Vue project based

Create a Vue project

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

Introduce Router

npm install vue-router@4 --save

Configure routing

Add a router folder to the update directory and create a new one

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

// Router 
import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    name: "Home",
    component: () => import("../views/Home/"),
  },
  {
    path: "/login",
    name: "Login",
    component: () => import("../views/Login/"),
  },
];
const router = createRouter({
  history: createWebHashHistory(),
  routes
});
export default router;

Router provides us with createWebHashHistory and createWebHistory methods to set hash mode and history mode.

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

Relative path configuration

In previous VueCli, we benefited from the WebPack packaging tool that directly uses specific symbols to represent the current path. Similarly, Vite also provides us with attributes.

// 
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const { resolve } = require('path')

// /config/
export default defineConfig({
  plugins: [vue()],
  // Define the relative path, @ instead  resolve: {
    alias: {
      '@': resolve(__dirname, 'src')
    }
  }
})

Introducing Vuex

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

npm i vuex@next --save

Vant introduction

download

npm install vant@next --save

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

// 
import { createApp } from "vue";
import App from "./";
import router from "./router";
import store from "./store";
import Vant from "Vant";
import "vant/lib/"; // Global introduction of styles
createApp(App).use(router).use(store).use(Vant).mount("#app");

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

&lt;template&gt;
   &lt;div&gt;
      &lt;van-nav-bar title="title" left-text="return" right-text="Button" left-arrow fixed @click-left="onClickLeft" @click-right="onClickRight" /&gt;
      &lt;van-nav-bar title="title" left-text="return" right-text="Button" left-arrow @click-left="onClickLeft" @click-right="onClickRight" /&gt;
   &lt;/div&gt;
&lt;/template&gt;

&lt;script lang="ts"&gt;
import { defineComponent } from "vue";

export default defineComponent({
   setup() {
      const onClickLeft = () =&gt; Toast("return");
      const onClickRight = () =&gt; Toast("Button");
      return {
         onClickLeft,
         onClickRight,
      };
   },
});
&lt;/script&gt;

In the above example, Toast is not defined. The reason is that we cannot refer to Vant locally after applying it globally, otherwise Vite will report an error.

This problem can be solved by writing tool class secondary encapsulation Toast.

// utils/
// Simple pop-up windowimport { Toast } from "Vant";
export const toast = (text: string) =&gt; {
  Toast(text);
};

import { defineComponent } from "vue";
import { toast } from "@/utils/util";

export default defineComponent({
   setup() {
      const onClickLeft = () =&gt; toast("return");
      const onClickRight = () =&gt; toast("Button");
      return {
         onClickLeft,
         onClickRight,
      };
   }
});

This is the end of this article about the construction and implementation of Vue-based projects. For more related vite construction vue3 projects, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!