给静态网站加后台简单大气网站欣赏

1. 使用官方脚手架创建项目

# 使用 vite 创建 vue3 项目
npm create vite@latest my-vue-app

选择：

• Framework: Vue
• Variant: JavaScript 或 TypeScript（根据你的需求）

进入目录并安装依赖：

cd my-vue-app
npm install

---

2. 安装常用依赖

npm install vue-router@4 pinia axios element-plus

---

3. 配置项目结构

推荐目录结构如下：

my-vue-app/
│── src/
│   ├── api/         # axios 封装
│   ├── assets/
│   ├── components/
│   ├── router/      # 路由配置
│   ├── store/       # pinia
│   ├── views/       # 页面
│   ├── App.vue
│   └── main.js
│── vite.config.js

---

4. 配置 Vue Router

新建 src/router/index.js：

import { createRouter, createWebHistory } from 'vue-router'// 路由页面
import Home from '@/views/Home.vue'
import About from '@/views/About.vue'const routes = [{ path: '/', name: 'Home', component: Home },{ path: '/about', name: 'About', component: About }
]const router = createRouter({history: createWebHistory(),routes
})export default router

新建两个页面 src/views/Home.vue 和 src/views/About.vue：

<!-- Home.vue -->
<template><div><h1>首页</h1><el-button type="primary" @click="$router.push('/about')">去 About</el-button></div>
</template>

<!-- About.vue -->
<template><div><h1>关于页</h1><el-button @click="$router.push('/')">返回首页</el-button></div>
</template>

---

5. 配置 Pinia

新建 src/store/index.js：

import { createPinia, defineStore } from 'pinia'export const pinia = createPinia()// 示例 store
export const useMainStore = defineStore('main', {state: () => ({count: 0}),actions: {increment() {this.count++}}
})

---

6. 配置 Axios 封装

新建 src/api/request.js：

import axios from 'axios'const service = axios.create({baseURL: '/api', // 统一请求前缀timeout: 5000
})// 请求拦截
service.interceptors.request.use(config => {// 可在此添加 tokenreturn config
}, error => Promise.reject(error))// 响应拦截
service.interceptors.response.use(response => response.data,error => Promise.reject(error)
)export default service

在 src/api/user.js 里写个例子：

import request from './request'export function getUserInfo() {return request.get('/user/info')
}

---

7. 引入 Element Plus

在 main.js 中引入：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { pinia } from './store'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'const app = createApp(App)app.use(router)
app.use(pinia)
app.use(ElementPlus)app.mount('#app')

---

8. App.vue 使用示例

<template><el-container style="height:100vh"><el-header><el-menu mode="horizontal" :default-active="$route.path"><el-menu-item index="/" @click="$router.push('/')">首页</el-menu-item><el-menu-item index="/about" @click="$router.push('/about')">关于</el-menu-item></el-menu></el-header><el-main><router-view /></el-main></el-container>
</template>

---

9. 运行

npm run dev

然后访问 http://localhost:5173 就能看到 Element Plus 菜单导航、路由切换、Pinia 状态管理和 Axios 封装 全部配置完成的项目。