vue3+vite+pinia+vue-router搭建环境

**Vue3 + Vite + Pinia + Vue-Router 搭建环境**

### 前言在本文中，我们将一步步地讲解如何使用 Vue3、Vite、Pinia 和 Vue-Router 来搭建一个现代化的前端应用。

### 环境准备首先，我们需要安装 Node.js 和 npm。然后，创建一个新项目目录，并初始化 npm：

bashmkdir my-appcd my-appnpm init -y

接下来，我们需要安装 Vite、Vue3、Pinia 和 Vue-Router：

bashnpm install --save-dev @vitejs/plugin-vue vue@next pinia vue-router@next

### Vite 配置创建一个新文件 `vite.config.js`，并添加以下配置：

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

export default defineConfig({
 plugins: [vue()],
});

这将告诉 Vite 使用 Vue3。

### Pinia 配置创建一个新文件 `pinia.config.js`，并添加以下配置：

javascriptimport { createPinia } from 'pinia';

const pinia = createPinia();

export default pinia;

这将创建一个新的 Pinia 实例。

### Vue-Router 配置创建一个新文件 `router/index.js`，并添加以下配置：

javascriptimport { createRouter, createWebHistory } from 'vue-router';
import HomeView from '../views/HomeView.vue';

const routes = [
 {
 path: '/',
 name: 'home',
 component: HomeView,
 },
];

const router = createRouter({
 history: createWebHistory(process.env.BASE_URL),
 routes,
});

export default router;

这将创建一个新的 Vue-Router 实例。

### App 组件创建一个新文件 `App.vue`，并添加以下配置：

vue<template>
 <div>
 <h1>My App</h1>
 <router-view />
 </div>
</template>

<script setup>
import { useStore } from 'pinia';
import router from './router';

const store = useStore();

console.log(store);
</script>

这将创建一个新的 App 组件，使用 Pinia 的 `useStore` 函数来获取 Pinia 实例。

### HomeView 组件创建一个新文件 `views/HomeView.vue`，并添加以下配置：

vue<template>
 <div>
 <h1>Home View</h1>
 <p>This is the home view.</p>
 </div>
</template>

<script setup>
import { useStore } from 'pinia';

const store = useStore();

console.log(store);
</script>

这将创建一个新的 HomeView 组件，使用 Pinia 的 `useStore` 函数来获取 Pinia 实例。

### 最终效果现在，我们可以启动应用并访问 来查看 App 组件。点击 "Home View" 链接，可以跳转到 HomeView 组件。

这就是我们如何使用 Vue3、Vite、Pinia 和 Vue-Router 来搭建一个现代化的前端应用。