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

一枚前端小姐姐2026-02-25 16:09

前言

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

一、环境准备

确保你已安装：

Node.js 16+
npm / yarn / pnpm

二、使用 Vite 创建项目

sql 复制代码

npm create vite@latest

步骤：

输入项目名
选择 Vue
选择 JavaScript 或 TypeScript

进入项目：

arduino 复制代码

cd 项目名
npm install
npm run dev

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

三、项目结构说明

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

四、配置 Vue Router

安装：

css 复制代码

npm install vue-router@4

新建 router/index.js：

javascript 复制代码

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 挂载：

javascript 复制代码

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：

javascript 复制代码

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

在 main.js 挂载：

php 复制代码

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

总结

本文完成了：

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

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