快捷導(dǎo)航

Vue3使用路由及配置vite.alias簡化導(dǎo)入寫法的過程詳解

更新時間：2022年11月11日 09:26:25 作者：曲鳥

這篇文章主要介紹了Vue3使用路由及配置vite.alias簡化導(dǎo)入寫法，本文通過實例代碼給大家講解的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下

一、使用路由

1）安裝vue-router

yarn add vue-router

2）注冊路由

將兩個組件Home、Project注冊到路由中：

import { createApp } from "vue";
import { createRouter, createWebHashHistory } from 'vue-router';
import App from "./App.vue";
const Home = { render(){ return 'Home'} }
const Project = { render(){ return 'Project'} }
const routes = [
    { path: '/', component: Home },
    { path: '/project', component: Project },
  ]
const app = createApp(App);
const router = createRouter({
  // 4. 內(nèi)部提供了 history 模式的實現(xiàn)。為了簡單起見，我們在這里使用 hash 模式。
  history: createWebHashHistory(),
  routes, // `routes: routes` 的縮寫
});
app.use(router);
app.mount("#app");

3）使用路由

App.vue文件加入如下代碼：

<template>
  <router-view></router-view>
</template>

效果如下：

在這里插入圖片描述

二、配置vite.alias簡化導(dǎo)入寫法

1）安裝@types/node

yarn add @types/node

2）修改vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    }
  }
})

3）修改tsconfig.JSON （不修改沒有提示）

在compilerOptions中加入下面配置：

 "baseUrl": "./",
    "paths": {
      "@/*": ["./src/*"]     //格式一定要寫對符號*不能少不然找不到@或者沒有代碼提示
    },

在這里插入圖片描述

效果如下：

在這里插入圖片描述

到此這篇關(guān)于Vue3使用路由及配置vite.alias簡化導(dǎo)入寫法的文章就介紹到這了,更多相關(guān)vue3 vite.alias路由配置內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue-cli3.0 腳手架搭建項目的過程詳解
這篇文章主要介紹了vue-cli3.0 腳手架搭建項目的過程，本文分步驟給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下
2018-10-10
vue實現(xiàn)實時上傳文件進度條
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)實時上傳文件進度條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-03-03
基于vue-cli3多頁面開發(fā)apicloud應(yīng)用的教程詳解
這篇文章主要介紹了基于vue-cli3多頁面開發(fā)apicloud應(yīng)用，本文采用vue-cli+APIcloud的方式寫解決以上痛點，開發(fā)靈活，并且打包之后體積更小速度更快,需要的朋友可以參考下
2019-06-06
vue增加強緩存和版本號的實現(xiàn)方法
這篇文章主要介紹了vue增加強緩存和版本號的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05
vue父組件通過props如何向子組件傳遞方法詳解
在Vue 中,可以使用 props 向子組件傳遞數(shù)據(jù)，下面這篇文章主要給大家介紹了關(guān)于vue父組件通過props如何向子組件傳遞方法的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來一起看看吧。
2017-08-08
uniapp中使用lottie實現(xiàn)JSON動畫的操作步驟
這篇文章主要介紹了如何在項目中使用JSON動畫組件,包括創(chuàng)建目錄結(jié)構(gòu)、下載JSON文件、編寫自定義組件代碼以及組件的使用方法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2025-01-01
一文詳解Vue中內(nèi)存泄漏的場景與預(yù)防技巧
即便是功能強大的?Vue.js?也無法完全避免內(nèi)存泄漏的問題,內(nèi)存泄漏不僅會影響應(yīng)用的性能,還可能導(dǎo)致瀏覽器崩潰,下面我們來看看Vue?中常見的內(nèi)存泄漏場景以及如何避免這些問題吧
2024-12-12
在Vue里如何把網(wǎng)頁的數(shù)據(jù)導(dǎo)出到Excel的方法
這篇文章主要介紹了在Vue里如何把網(wǎng)頁的數(shù)據(jù)導(dǎo)出到Excel，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-09-09
Vue2.0實現(xiàn)1.0的搜索過濾器功能實例代碼
本篇文章主要介紹了Vue2.0實現(xiàn)1.0的搜索過濾器功能實例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下。
2017-03-03
vue配置別名alias在webstorm不生效問題及解決
這篇文章主要介紹了vue配置別名alias在webstorm不生效問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10