安装构建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等
