使用 Vite 创建项目

Vite是一个现代前端构建工具，它提供了快速的开发服务器和优化的构建过程。本章节将指导你使用Vite创建Vue3项目。

什么是 Vite？

Vite（法语意为"快速"）是由Vue.js的作者尤雨溪开发的前端构建工具，它具有以下特点：

• 快速的开发服务器：使用原生ES模块，启动速度极快
• 热模块替换：修改代码后立即看到效果，无需刷新页面
• 优化的构建过程：使用Rollup进行生产构建，生成优化的代码
• 开箱即用：支持多种框架，包括Vue、React、Svelte等

使用 Vite 创建 Vue3 项目

1. 运行 Vite 创建命令

# 使用npm
npm create vite@latest

# 使用yarn
yarn create vite

# 使用pnpm
pnpm create vite

2. 交互式配置

运行命令后，你会看到一个交互式的配置界面：

1. Project name：输入项目名称，如 my-vue3-app
2. Select a framework：选择框架，这里选择 Vue
3. Select a variant：选择变体，这里选择 JavaScript（或 TypeScript 如果你熟悉TypeScript）

3. 项目创建

配置完成后，Vite会自动创建项目结构。

项目结构

创建完成后，你会看到以下项目结构：

my-vue3-app/
├── public/
│   └── favicon.ico
├── src/
│   ├── assets/
│   │   └── vue.svg
│   ├── components/
│   │   └── HelloWorld.vue
│   ├── App.vue
│   └── main.js
├── .gitignore
├── index.html
├── package.json
├── README.md
└── vite.config.js

安装依赖

Vite创建项目后，需要手动安装依赖：

cd my-vue3-app
npm install

运行项目

1. 开发服务器

npm run dev

运行后，你会看到一个本地开发服务器的地址，如 http://localhost:5173/，在浏览器中打开这个地址即可查看项目。

2. 构建项目

npm run build

构建完成后，项目会被编译到 dist 目录中，用于生产环境部署。

与 create-vue 的区别

Vite 创建的项目

• 结构简单：默认只包含最基本的文件和依赖
• 灵活度高：需要手动添加路由、状态管理等功能
• 适合快速原型：适合快速创建小型项目或原型

create-vue 创建的项目

• 结构完整：包含路由、状态管理等完整的项目结构
• 配置丰富：预设了ESLint、Prettier等工具
• 适合生产项目：适合创建完整的生产级应用

添加路由和状态管理

如果你使用Vite创建项目，需要手动添加路由和状态管理：

1. 添加 Vue Router

npm install vue-router@4

然后创建路由配置文件：

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: () => import('../views/AboutView.vue')
  }
]

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

export default router

2. 添加 Pinia

npm install pinia

然后创建状态管理文件：

// src/stores/counter.js
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  getters: {
    doubleCount: (state) => state.count * 2
  },
  actions: {
    increment() {
      this.count++
    }
  }
})

3. 在 main.js 中注册

// src/main.js
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import router from './router'
import App from './App.vue'

const app = createApp(App)

app.use(createPinia())
app.use(router)
app.mount('#app')

常见问题

1. 权限问题

• Windows：以管理员身份运行命令提示符
• macOS/Linux：使用 sudo 命令或修改权限

2. 网络问题

• 配置镜像：确保npm配置了正确的镜像源
• 代理设置：如果在公司网络中，可能需要配置代理

3. 版本问题

• Node.js版本：确保Node.js版本 >= 16
• Vite版本：使用最新版本的Vite

总结

使用Vite创建Vue3项目是一个快速而简单的过程，它为你提供了一个轻量级的项目结构。如果你需要一个简单的项目或原型，Vite是一个很好的选择。如果你需要一个完整的生产级应用，create-vue可能更适合你。

无论你选择哪种方式，Vue3都提供了强大的功能和优秀的开发体验，让你能够快速构建现代化的前端应用。