vue3.0+vite+ts项目搭建(二)

集成vue-router

使用yarn

yarn add vue-router@next --save

安装完成之后在src目录下创建文件夹router/index.ts，创建完成之后需要在Vue-Router中对Vue-Router进行初始化配置。我们暂时把初始化的工作搁置一下，先需要创建pages文件夹，把需要展示的页面创建完成。

创建完成之后，接下来就是完善router/index.ts中文件的初始化工作了：

import { createRouter, createWebHashHistory } from "vue-router";

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: "/home",
      name: "Home",
      alias: "/",
      component: () => import("../pages/Home.vue")
    },
    {
      path: "/about",
      name: "About",
      component: () => import("../pages/About.vue")
    }
  ]
})

export default router;

接下来在main.ts文件中集成Vue-Router：

import { createApp } from 'vue';
import App from './App.vue';

import router from "./router";

const app = createApp(App);
app.use(router);
app.mount('#app');

测试一下，这里修改一下App.vue的代码，测试一下我们的路由是否已经可以正常使用了。

接下来启动服务就可以看到所配置的页面了，说明配置的路由已经生效了。

集成Vuex

使用 Yarn

yarn add vuex@next --save

安装完成之后，首先添加store/index.ts来初始化Vuex。需要注意的是，如下示例使用了Vuex命名空间。可能在实际项目中使用命名空间相对来说还是比较普遍的，避免进行状态管理的时候导致变量污染。

import { createStore } from "vuex";

const store = createStore({
  modules: {
    home: {
      namespaced: true,
      state: {
        count: 1
      },
      mutations: {
        add(state){
          state.count++;
        }
      }
    }
  }
})

export default store;

集成到Vue中：

import { createApp } from 'vue';
import App from './App.vue';

import router from "./router";
import store from "./store";

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

现在Vuex就已经被集成到Vue中了为了保证集成的Vuex是有效地，那么需要对此进行测试：

pages/Home.vue

当点击按钮的时候，就可以发现count值也随着点击每次递增，那么store是可以正常使用.

参考:Vite开发环境搭建