Vue3 + Vite 从零搭建项目，超详细入门指南

前言

Vue3 搭配 Vite 构建工具，开发速度飞起。这篇文章带你从 0 到 1 搭建一个标准 Vue3 工程化项目。

一、环境准备

确保你已安装：

• Node.js 16+
• npm / yarn / pnpm

二、使用 Vite 创建项目

npm create vite@latest

步骤：

1. 输入项目名
2. 选择 Vue
3. 选择 JavaScript 或 TypeScript

进入项目：

cd 项目名
npm install
npm run dev

打开浏览器即可看到 Vue3 欢迎页面。

三、项目结构说明

• main.js：入口文件
• App.vue：根组件
• components/：公共组件
• views/：页面组件
• router/：路由
• store/：状态管理
• assets/：静态资源

四、配置 Vue Router

安装：

npm install vue-router@4

新建 router/index.js：

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  }
]

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

export default router

在 main.js 挂载：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

五、配置 Pinia 状态管理

安装：

npm install pinia

新建 store/index.js：

import { createPinia } from 'pinia'
const pinia = createPinia()
export default pinia

在 main.js 挂载：

import store from './store'
createApp(App).use(router).use(store).mount('#app')

总结

本文完成了：

• Vite + Vue3 项目创建
• Vue Router 4 路由配置
• Pinia 状态管理配置

下一篇我们讲 Vue3 组合式 API 最佳实践。