安装构建vue-router

安装相关依赖

//使用命令行查看vue-router 所有版本号
npm info vue-router versions
安装最新的vue-router@4.0.0-beta.6
npm install vue-router@4.0.0-beta.6
yarn add vue-router@4.0.0-beta.6

npm install vue-router@next
yarn add vue-router@next

创建router/index.js文件

• 创建路由对象并抛出

import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '@/views/home.vue'

const Router = createRouter({
  history: createWebHashHistory(),
  routes: [{
    path: '/',
    name: 'home',
    component: Home
  }]
})

export default Router

• 这里如果一开始就使用@符号引入是会报错的需要在vite.config.js中进行配置

  image

安装构建vuex

安装依赖

npm install vuex@next --save
yarn add vuex@next

创建store/index.js文件

• 创建store对象并抛出

import { createStore } from 'vuex'

const store = createStore({
  state: {

  },
  getters: {

  },
  mutations: {

  },
  actions: {

  },
  modules: {

  }
})

export default store

在main.js中使用router和store

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index.js'
import store from './store/index.js'

createApp(App)
.use(router)
.use(store)
.mount('#app')