Vue 3 环境搭建与 Vite 项目初始化
Vue 3 新项目现在基本都会从 Vite 起步。它启动快,配置薄,和单文件组件配合自然。刚开始别急着装 UI 库、状态库、路由和一堆插件,先把项目骨架、类型检查和构建流程跑顺
创建项目:
npm create vite@latest my-vue-app -- --template vue-ts
cd my-vue-app
npm install
npm run dev
如果用 pnpm:
pnpm create vite my-vue-app --template vue-ts
cd my-vue-app
pnpm install
pnpm dev
入口通常是这样:
import {
createApp } from "vue"
import App from "./App.vue"
createApp(App).mount("#app")
这是 Vue 应用最小启动过程。后面接 Router、Pinia、UI 库,也是在 createApp(App) 后面逐个 use(),最后再 mount
目录可以先保持简单:
src/
assets/
components/
composables/
pages/
stores/
App.vue
main.ts
小项目没必要一上来就搞复杂分层。等页面多了,再把业务模块拆出来。过早建一堆空目录,只会让新人不知道代码该放哪
Vue 单文件组件建议直接用 <script setup lang="ts">:
<script setup lang="ts">
const message = "hello vue"
</script>
<template>
<h1>{
{ message }}</h1>
</template>
script setup 少了很多样板代码,类型推断也舒服。除非你在维护老项目,否则新组件可以默认这么写
初始化后一定跑生产构建:
npm run build
npm run preview
开发服务器能跑,不代表生产构建没问题。路径别名、静态资源、环境变量、类型检查,经常在 build 阶段才暴露
我的初始化清单是:Vue + TS 模板,跑通 dev/build/preview,删掉模板无关代码,确定目录约定,再接 Router 和 Pinia。先把基础盘稳住,比一开始追求“企业级模板”更靠谱