小洛的前端技术博客Appearance
vite-vue3 搭建项目
一、用 Vite 官方模板搭建（推荐）
创建项目
bash
# 使用yarn创建项目（推荐）
yarn create vite my-vue-app --template vue
# 或者使用npm
npm init vite@latest my-vue-app -- --template vue
# 进入项目目录
cd my-vue-app
# 安装依赖
yarn # 或者 npm install
# 启动开发服务器
yarn dev # 或者 npm run dev# 使用yarn创建项目（推荐）
yarn create vite my-vue-app --template vue
# 或者使用npm
npm init vite@latest my-vue-app -- --template vue
# 进入项目目录
cd my-vue-app
# 安装依赖
yarn # 或者 npm install
# 启动开发服务器
yarn dev # 或者 npm run dev项目结构解析
plaintext
my-vue-app/
├── node_modules/
├── public/
│ └── index.html
├── src/
│ ├── assets/
│ │ └── logo.png
│ ├── App.vue
│ ├── main.js
│ └── style.css
├── .gitignore
├── index.html
├── package.json
└── vite.config.jsmy-vue-app/
├── node_modules/
├── public/
│ └── index.html
├── src/
│ ├── assets/
│ │ └── logo.png
│ ├── App.vue
│ ├── main.js
│ └── style.css
├── .gitignore
├── index.html
├── package.json
└── vite.config.js启动成功
打开浏览器访问 http://localhost:5173，看到 Vue3 欢迎界面就成功啦！
二、使用 Vue 官方集成工具（更全面）
一键创建项目
bash
npm create vue@latestnpm create vue@latest交互式配置
bash
✔ Project name: … my-vue3-project
✔ Add TypeScript? … Yes // 是否添加TypeScript支持
✔ Add JSX Support? … No // 是否添加JSX支持
✔ Add Vue Router? … Yes // 是否添加Vue Router路由
✔ Add Pinia? … Yes // 是否添加Pinia状态管理
✔ Add Vitest? … No // 是否添加单元测试
✔ Add Cypress? … No // 是否添加E2E测试
✔ Add ESLint? … Yes // 是否添加代码检查
✔ Add Prettier? … Yes // 是否添加代码格式化✔ Project name: … my-vue3-project
✔ Add TypeScript? … Yes // 是否添加TypeScript支持
✔ Add JSX Support? … No // 是否添加JSX支持
✔ Add Vue Router? … Yes // 是否添加Vue Router路由
✔ Add Pinia? … Yes // 是否添加Pinia状态管理
✔ Add Vitest? … No // 是否添加单元测试
✔ Add Cypress? … No // 是否添加E2E测试
✔ Add ESLint? … Yes // 是否添加代码检查
✔ Add Prettier? … Yes // 是否添加代码格式化项目结构更丰富
plaintext
my-vue3-project/
├── src/
│ ├── assets/
│ ├── components/
│ ├── router/ // Vue Router路由
│ ├── stores/ // Pinia状态管理
│ ├── App.vue
│ ├── main.js
│ └── env.d.ts // TypeScript环境定义
├── .eslintrc.cjs // ESLint配置
├── .prettierrc.json // Prettier配置
└── tsconfig.json // TypeScript配置my-vue3-project/
├── src/
│ ├── assets/
│ ├── components/
│ ├── router/ // Vue Router路由
│ ├── stores/ // Pinia状态管理
│ ├── App.vue
│ ├── main.js
│ └── env.d.ts // TypeScript环境定义
├── .eslintrc.cjs // ESLint配置
├── .prettierrc.json // Prettier配置
└── tsconfig.json // TypeScript配置配置路径别名
js
// vite.config.js
import { defineConfig } from 'vite'
import path from 'path'
export default defineConfig({
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
},
},
})// vite.config.js
import { defineConfig } from 'vite'
import path from 'path'
export default defineConfig({
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
},
},
})