vite中引入vue-router路由，以及文件简称

感觉 vite 有点学create-react-app了, 脚手架也不给我们自动搞好 vuex 和 react-router ，让我这衣来伸手饭来张口的人感觉生活难了好多。
好可恶啊

对我这个小白，不想学习只想吃老本的前端程序员来说太难了，但想了想为了挣钱还是老老实实去学习吧。

好了不恶搞了开始步入正题了。
vue用着真爽 vite真快，推荐

其实只要你是vue2 的熟练使用者的话，自己简单配置下还是可以

因为vite搭配的是vue3 那么 vue-router 也应该是搭配 vue3
安装

npm i vue-router@4 --save

在 src文件下创建一个 router/index.js 文件。你想装逼创建一个ts 随便毕竟原生支持ts

import {
    
     createRouter, createWebHistory } from "vue-router"
import Home from "@/view/home.vue"
const routes = [
    {
    
    
        path: '/home',
        name: 'home',
        component: Home
    },
    {
    
    
        path: '/about',
        name: 'about',
        component: () => import('../view/about.vue')
    }
]
const router = createRouter({
    
    
    history: createWebHistory(),
    routes
})

export default router

这里我用到别名。@ 在配置文件中配置下就行毕竟vue2用习惯(说实话react用的时间比vue还长但是还是喜欢vue 毕竟开发快啊)

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

然后就是引入使用了
main.js

import {
    
     createApp } from 'vue'
import App from './App.vue'
import router from "./router"

const app = createApp(App);
app.use(router)
app.mount('#app')

代码示例
home.vue

<template>
    <Test msg="this is a vue3 appliaction? hello world"/>
    <router-link to="/about">跳转关于页面</router-link>
</template>

<script setup>
    import Test from '../components/Test.vue'
</script>

about.vue文件

<script setup>
    import {
    
     ref } from 'vue'
    const demo = ref('测试')
</script>

<template>
    <h1>我是关于页面 {
    
    {
    
     demo }}</h1>
    <router-link to="/home">跳转首页页面</router-link>
</template>

在这里插入图片描述

这样就实现了。关注我持续更新前端知识。

vite中引入vue-router路由，以及文件简称

猜你喜欢