vite初始化vue3.0项目——配置router和vuex

安装构建vue-router

安装相关依赖

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中进行配置

  
  
  vite.config.js配置

---

安装构建vuex

安装依赖

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')

• 到这一步，基本的路由和vuex就配置好了，可以直接在项目中直接使用了，下一篇文章中，我将继续学习配置一些css预编译器，并配置主题文件，还有一些基本的lib，比如vue.prototype等