Ru果你还在忍受着 Webpack 那漫长的冷启动编译时间，那真的有点太“折磨”自己了。说实话，每次项目稍微大一点，改一行代码等半天才Neng在浏览器kan到效果，那种感觉就像是还在用拨号上网一样让人抓狂。好在Vue3 的横空出世搭配上 Vite 这种由尤雨溪大神亲手打造的下一代前端开发工具，简直是把开发体验提升到了一个全新的维度。那种丝滑般的启动速度，真的会让你用一次就回不去。

今天咱们不聊那些枯燥的理论，直接上手实战。我想带着大家从零开始，一步步搭建一个标准、规范且具备生产力的 Vue3 工程化项目。这不仅仅是一个简单的“Hello World”，而是一个真正Neng打的后台管理系统或者复杂单页应用的雏形。准备好了吗？泡一杯咖啡，咱们开始吧。

一、工欲善其事：环境准备与检查

在开始敲代码之前，咱们得先检查一下手里的家伙事儿齐不齐。Vite 对 Node.js 的版本是有一定要求的，毕竟它用到了hen多 ES Module 的新特性。Ru果你的 Node.js 版本太老，可Neng会遇到各种奇奇怪怪的报错，到时候别怪我没提醒你。

通常来说建议你的 Node.js 版本至少在 12 以上，不过为了追求极致的稳定和性Neng，我强烈推荐直接上 14 或者 16+ 的 LTS 版本。你Ke以打开终端，输入以下命令来查kan当前的版本：

node -v

Ru果版本号让你满意，那咱们就Ke以继续往下走了。Ru果没有，赶紧去 Node.js 官网下载一个Zui新的安装包升级一下这可是基础中的基础。

二、极速启动：使用 Vite 初始化项目骨架

以前我们用 vue-cli 搭建项目，那个等待的时间足够你刷完好几条短视频了。但是 Vite 不一样，它快得惊人。我们不需要安装什么全局的 CLI 脚手架，直接利用 npm 的 create 功Neng即可。在你想存放项目的目录下打开终端，输入下面这行命令：

npm create vite@latest

敲下回车的那一刻，奇迹就发生了。终端会提示你输入项目名称。这里你Ke以随便起，比如我就叫它 my-vue3-app。当然你也Ke以在命令后面直接跟上项目名，像这样 npm create vite@latest my-vue3-app，这样geng省事。

紧接着，Vite 会问你想要用什么框架。既然我们今天的主题是 Vue3，那肯定是用键盘的方向键选择 Vue，然后回车。下一步，它会问你需不需要 TypeScript。对于新手来说为了降低上手门槛，咱们先选 JavaScript；Ru果你是老手，直接上 TS 肯定是geng优的选择。这里为了演示的通用性，我们暂时选择 JS。

好了骨架搭建完成。这时候你会发现，整个过程快得让你怀疑是不是出错了。没错，这就是 Vite 的魅力。

三、安装依赖与初次见面

虽然项目骨架拉下来了但这时候还没有 node_modules，也就是说依赖包还没装。我们需要进入项目目录，然后安装依赖。这步操作是免不了的，毕竟巧妇难为无米之炊嘛。

依次执行以下命令：

cd my-vue3-app
npm install
npm run dev

这里稍微解释一下npm install 会根据 package.json 里的配置把需要的包dou下载下来。而 npm run dev 则是启动开发服务器。当终端里出现类似 Local: http://localhost:5173/ 这样的提示时恭喜你，项目Yi经跑起来了！

按住 Ctrl 键点击那个链接，或者直接复制到浏览器里打开。你会kan到一个 Vue 的欢迎页面上面还有那个大大的 Vite logo。这一刻，是不是有点小激动？别急，好戏还在后头。

四、路在脚下：配置 Vue Router 路由管理

一个像样的单页应用，肯定不Neng只有一个页面。我们需要在不同的视图之间切换，这就离不开路由。在 Vue3 的生态里官方推荐的路由库自然是 Vue Router，而且我们要装版本 4 以上的，因为只有 Vue Router 4 才完美支持 Vue3 的新特性。

把路由包装上：

npm install vue-router@4

装好之后我们不Neng像 Vue2 那样随便写个文件就用了得讲究点“工程化”。咱们在 src 目录下新建一个 router 文件夹，专门用来放路由相关的配置。在这个文件夹里新建一个 index.js 文件。

在这个文件里我们需要引入 createRouter 和 createWebHistory。这里有个小细节，createWebHistory 是用来开启 HTML5 History 模式的，也就是 URL 里没有那个丑陋的 # 号，kan起来geng专业。不过这需要后端配合Zuo Nginx 配置，Ru果是纯本地开发，这个模式完全没问题。

代码写起来大概是这样的：

import { createRouter, createWebHistory } from 'vue-router'
// 这里先引入一个简单的 Home 组件，后面你Ke以自己创建
import Home from '../views/Home.vue'
const routes = 
const router = createRouter({
  history: createWebHistory,
  routes
})
export default router

别忘了我们还需要在 src 下建一个 views 文件夹，并在里面放一个 Home.vue，不然路由找不到组件会报错的。

Zui后一步，也是Zui关键的一步，就是把路由挂载到 Vue 的实例上。打开 main.js，把我们的 router 引进去并 use 一下：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp
app.use
app.mount

这时候，你Ke以在 App.vue 里加上 标签，这是路由组件出口。试着改改路由配置，你会发现页面Yi经Ke以根据 URL 变化了。

五、全局状态：引入 Pinia 进行状态管理

以前我们Zuo Vue 项目，状态管理首选 Vuex。但是说实话，Vuex 的写法对于新手来说有点绕，什么 mutation、action、getter，概念一大堆，有时候为了改个状态得写好几行代码，挺烦人的。现官方推荐的状态管理库是 Pinia。

Pinia 简直是清爽界的代表。它不仅去掉了 mutation，而且对 TypeScript 的支持非常友好。Zui棒的是它Ke以直接在组件里像用普通函数一样调用状态，不需要那个繁琐的 this.$store 了。

安装 Pinia 也是一条命令的事儿：

npm install pinia

同样的套路，我们在 src 下建个 store 文件夹。为了演示，我们建一个 index.js 作为入口，或者直接建具体的 store 文件，比如 user.js。这里先按通用的Zuo法，建个入口文件初始化一下：

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

然后回到我们的 main.js，把 Pinia 也挂载上去。注意顺序，一般建议先挂 Pinia，再挂 Router，虽然有时候顺序不影响，但养成好习惯总是没错的。

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
createApp.use.use.mount

现在你Ke以尝试定义一个 Store。比如在 store/user.js 里：

import { defineStore } from 'pinia'
export const useUserStore = defineStore('user', {
  state:  => ({
    name: '张三',
    age: 18
  }),
  actions: {
    setName {
      this.name = newName
    }
  }
})

在组件里直接 import { useUserStore } from '@/store/user'，然后 const userStore = useUserStore，你就Neng随意读写 userStore.name 了。是不是比 Vuex 简单太多了？

六、锦上添花：路径别名与代码规范

项目搭到这其实Yi经Neng跑了。但是作为一个追求完美的“资深”开发者，我们还得解决几个痛点。

第一个痛点就是路径引用。你kan我们上面的代码，引用组件用的是 ../views/Home.vue。Ru果项目层级深了就会出现 ../../../ 这种地狱般的写法。在 Vite 里配置 @ 别名非常简单。打开 vite.config.js，引入 path 模块，然后配置 resolve.alias：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
export default defineConfig({
  plugins: ,
  resolve: {
    alias: {
      '@': path.resolve
    }
  }
})

配置完这个，你就Ke以愉快地使用 import Home from '@/views/Home.vue' 了代码kan起来瞬间清爽了不少。

另外关于代码规范，虽然这里不展开细讲 ESLint 和 Prettier 的配置，但我强烈建议你在项目初期就把这两个工具加上。统一团队的代码风格，Neng省去无数个因为“空格还是 Tab”而引发的 Code Review 争吵。相信我，这是为了你的发际线着想。

不知不觉，我们Yi经把一个标准的 Vue3 + Vite + Vue Router + Pinia 的项目架子搭起来了。回顾一下我们经历了环境检查、脚手架初始化、路由配置、状态管理接入，还顺带聊了聊路径别名优化。这一套组合拳下来你的项目Yi经具备了应对大多数中大型前端开发场景的Neng力。

相比于老派的 Webpack 模板，这套技术栈在开发体验上有着质的飞跃。Vite 的按需编译让热geng新几乎在毫秒级完成，Vue3 的 Composition API 让代码逻辑复用变得geng加灵活，Pinia 则让状态管理变得前所未有的简单。

当然这还只是个开始。接下来你可Neng会遇到如何引入 UI 组件库，如何配置 Axios 封装请求，甚至如何配置 Vite 的打包优化策略。不过那些dou是后话了。至少现在你Yi经拥有了一个坚固的“地基”，Ke以放心大胆地往上盖楼了。

别犹豫了赶紧去试试吧。当你第一次在浏览器里kan到自己亲手搭建的页面瞬间加载出来时那种成就感是无与伦比的。下一篇文章，我们再来深入探讨一下 Vue3 组合式 API的Zui佳实践，kankan怎么写出geng优雅、geng易维护的代码。咱们不见不散！

---