Vite 配置 vue-router 和 vuex

àì夳堔傛蜴生んèń 2022-10-05 00:37 279阅读 0赞

##### 安装相应依赖 #####

# 安装依赖
    yarn add vue-router@next vuex@next

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70]

##### 创建目录结构 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70 1]

##### 基础文件配置 #####

> router/index.ts

import {  createRouter, createWebHashHistory, createWebHistory } from "vue-router";
    import Home from '../views/Home.vue'
    
    const routes = [
      { 
        path: "/",
        name: "home",
        component: Home
      },
      { 
        path: "/demo",
        name: "demo",
        component: () =>
          import(/* webpackChunkName: "demo" */ "@/views/demo/Demo.vue"),
      },
    ];
    
    const index = createRouter({ 
      history: createWebHashHistory(),
      routes
    })
    
    export default index;

> store/index.ts

import {  createStore } from 'vuex'
    
    export default createStore({ 
      state: { 
      },
      mutations: { 
      },
      actions: { 
      },
      modules: { 
      }
    })

##### 入口文件配置 #####

> main.ts

import {  createApp } from 'vue'
    import App from './App.vue'
    import index from './router'
    import store from './store'
    
    const app = createApp(App)
    app.use(store).use(index).mount('#app')

##### App.vue - 使用 router-view 处理路由 #####

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70]: /images/20221005/d0ee6fa4204b4b518c44f0feb84a78fc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70 1]: /images/20221005/fdac2dc18a314a08a0e3f99586509ea6.png