Vite + Vue3 + Vue Router + Pinia 搭建项目模板

1. 创建 Vite 项目

• vite 初始化项目

# 本项目使用pnpm来管理依赖，如果没安装pnpm,先执行全局安装  npm i pnpm -g
pnpm create vite vue-template --template vue
cd vue-template
pnpm install
pnpm run dev

• 配置 vite.config.js

import { defineConfig } from 'vite';
import { resolve } from 'path';
import vue from '@vitejs/plugin-vue';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, './src')
    }
  }
});

2. 集成 Vue Router

• 安装 vue-router

pnpm i vue-router@4

• 使用 vue-router

// 在 src 目录下创建 router 文件夹，来存放相关的路由文件
// src/router/index.js
import { createRouter, createWebHistory } from "vue-router";

const routes = [
  { path: "/", redirect: "/home" },
  { path: "/home", name: "Home", component: () => import("@/views/Home.vue") },
  { path: "/demo", name: "Demo", component: () => import("@/views/Demo.vue") },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

• 修改 main.js

import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
import router from "./router";

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

3. 集成 Pinia

• 安装 Pinia

pnpm i pinia

• 使用 Pinia

// 在 src 目录下创建 store 文件夹，来存放相关的数据状态文件
// src/store/index.js
import { createPinia } from "pinia";
const store = createPinia();
export default store;

// 定义user数据
// store/modules/user.js
import { defineStore } from 'pinia'
// 第一个参数是应用程序中 store 的唯一 id
const userStore = defineStore('user', {
    state: () => {
        return {
            name: 'xxx',
        }
    },
    // other options...
})
export default userStore

• 修改 main.js

import { createApp } from "vue";
import "./style.css";
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");