vue3使用路由跟vuex

vue3安装跟使用路由

先安装vue版本:
npm 安装
npm i vue-router@4.0.0-beta.4 -S
yarn 安装
yarn add vue-router@4.0.0-beta.7 -S

新建router文件夹下面新建index.js文件代码如下
index.js文件代码

import {createRouter,createWebHistory } from 'vue-router'
const Home  = () => import('../view/home/index.vue')
const createhistory = createWebHistory()
const router = createRouter({
  history: createhistory,
  routes: [
    {
      path: '/',
      component: Home
    },
  ]
})
export default router

mian.js引入router文件夹下面的index.js文件

此时main.js有两种写法(两种方法都可以实现)
第一种

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

第二种

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

记得下App.vue文件下写入

<router-view></router-view>

vuex安装跟vue-router一样的噢用起来跟vue2没什么区别的

安装
yarn add vuex@4.0.0-beta.4 -S
npm i vuex@4.0.0-beta.4 -S

import { createStore } from 'vuex'
interface State {
  userName: string
}
export default createStore({
  state(): State {
    return {
      userName: "你好啊",
    };
  },
});