使用Vite创建Vue项目指南

使用Vite创建Vue项目指南

1. 环境准备

1.1 安装Node.js

确保已安装Node.js（建议版本16.0.0或更高）

node -v
npm -v

1.2 安装Vite

npm create vite@latest

2. 创建项目

2.1 初始化项目

npm create vite@latest my-vue-app -- --template vue

2.2 进入项目目录

cd my-vue-app

2.3 安装依赖

npm install

3. 项目结构说明

my-vue-app/
├── public/                 # 静态资源目录
├── src/                    # 源代码目录
│   ├── assets/            # 项目资源文件
│   ├── components/        # 公共组件
│   ├── views/             # 页面视图
│   ├── router/            # 路由配置
│   ├── store/             # 状态管理
│   ├── api/               # API接口
│   ├── utils/             # 工具函数
│   ├── styles/            # 全局样式
│   ├── App.vue            # 根组件
│   └── main.js            # 入口文件
├── .gitignore             # Git忽略文件
├── index.html             # HTML模板
├── package.json           # 项目配置
├── vite.config.js         # Vite配置
└── README.md              # 项目说明

4. 配置说明

4.1 vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'export default defineConfig({plugins: [vue()],resolve: {alias: {'@': path.resolve(__dirname, 'src')}},server: {port: 3000,open: true}
})

4.2 package.json

{"name": "my-vue-app","version": "0.0.1","scripts": {"dev": "vite","build": "vite build","preview": "vite preview"},"dependencies": {"vue": "^3.3.0","vue-router": "^4.2.0","pinia": "^2.1.0","axios": "^1.4.0"},"devDependencies": {"@vitejs/plugin-vue": "^4.2.0","vite": "^4.4.0"}
}

5. 常用依赖安装

5.1 路由管理

npm install vue-router@4

5.2 状态管理

npm install pinia

5.3 HTTP请求

npm install axios

5.4 UI组件库

npm install element-plus

5.5 样式预处理器

npm install sass -D

6. 项目初始化配置

6.1 配置路由

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'const routes = [{path: '/',name: 'Home',component: () => import('@/views/Home.vue')}
]const router = createRouter({history: createWebHistory(),routes
})export default router

6.2 配置状态管理

// src/store/index.js
import { createPinia } from 'pinia'const pinia = createPinia()export default pinia

6.3 配置HTTP请求

// src/utils/request.js
import axios from 'axios'const service = axios.create({baseURL: '/api',timeout: 5000
})service.interceptors.request.use(config => {// 请求拦截器return config},error => {return Promise.reject(error)}
)service.interceptors.response.use(response => {// 响应拦截器return response.data},error => {return Promise.reject(error)}
)export default service

7. 开发规范

7.1 文件命名规范

• 组件文件：PascalCase命名，如UserProfile.vue
• 工具文件：camelCase命名，如formatDate.js
• 样式文件：kebab-case命名，如main-style.scss

7.2 代码规范

• 使用ESLint进行代码检查
• 使用Prettier进行代码格式化
• 遵循Vue3组合式API规范

7.3 Git提交规范

• feat: 新功能
• fix: 修复bug
• docs: 文档更新
• style: 代码格式调整
• refactor: 代码重构
• test: 测试相关
• chore: 构建过程或辅助工具的变动

8. 开发流程

8.1 启动开发服务器

npm run dev

8.2 构建生产环境

npm run build

8.3 预览生产构建

npm run preview

9. 常见问题解决

9.1 路径别名配置

在vite.config.js中配置路径别名，使用@代替src目录

9.2 跨域问题

在vite.config.js中配置代理

server: {proxy: {'/api': {target: 'http://localhost:8080',changeOrigin: true}}
}

9.3 环境变量配置

创建.env文件

VITE_API_BASE_URL=/api

10. 参考资料

1. Vite官方文档：https://vitejs.dev/
2. Vue3官方文档：https://v3.vuejs.org/
3. Vue Router文档：https://router.vuejs.org/
4. Pinia文档：https://pinia.vuejs.org/