Vite2 기반x의 Vue 3.x 프로젝트의 구축 실현

Vue 3 만들기x 항목

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

라우터 도입 4.x

npm install vue-router@4 --save

라우팅 구성

더 디렉터리에router의 폴더를 추가하고 index를 새로 만듭니다.js
Router 4.x는 우리에게 Router 대신 Create Router를 제공했다.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,
      };
   }
});

Vite2 기반x의 Vue 3.x 프로젝트의 구축이 실현된 글은 여기에 소개되었습니다. 더 많은 관련vite 구축 vue3 프로젝트 내용은 저희 이전의 글을 검색하거나 아래의 관련 글을 계속 훑어보십시오. 앞으로 많은 응원 부탁드립니다!