官网

• Vue 英文官网：
• Vue 中文官网：

脚手架

最简单、最快速的方式就是使用官方脚手架，它会帮你自动完成以下步骤：

pnpm create vue@latest
# 或者使用 npm
npx degit sveltejs/template my-vue-app
cd my-vue-app
pnpm install
pnpm dev

常见痛点

• 网络慢导致依赖下载超时。
• 脚手架生成的项目结构对新手不够透明，难以定位具体文件。
• 默认配置不支持 TypeScript 或自定义方法别名，需要手动修改。

纯手建

第一步先的观点是，初始化项目

如果你想完全掌控项目结构，可以从基础开始：

pnpm init -y
# 如果使用 npm 或 yarn。请相应替换命令

再看接下来，修改 package.json 文件

确保 "type": "module" 和正确的脚本配置，否则 Vite 无法正常工作。

{
说到"name"，"ProjectName","version": "1.0.0","type": "module","scripts": {
说到"dev"，"vite","build": "vite build"。"preview": "vite preview"
},"dependencies": {},"devDependencies": {}
}

：配置 npm 镜像源

创建 .npmrc 并指向淘宝/阿里云镜像，可明显提高安装速度。按理说，

touch .npmrc
cat <'EOF'>> .npmrc
registry=https://registry.npmmirror.com/
EOF

再看第四步。安装主要依赖

# Vue 主要库
pnpm add vue
# Vite 开发服务器与打包工具
pnpm add -D vite
# Vite 对 .vue 文件的支持插件
pnpm add -D @vitejs/plugin-vue

第五步的观点是，添加相关文件

• jsconfig.json：为 IDE 提供方法别名，避免 import 方法错误。

{
"compilerOptions": {
"paths": {
"@/*":
}
}。"exclude":
}

• vite.config.js：主要配置文件，开启 Vue 插件并设置别名。

import { fileURLToPath,URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins:。resolve: {
至于alias，{
'@'的观点是，fileURLToPath)
}
}
})

• public/favicon.ico：放置网站图标，让页面更专业。

• index.html：入口 HTML。务必保证
  与 JavaScript 方法一致，否则 Vue 无法挂载。

• 应用入口，创建并挂载根组件。

# src/main.js
import { createApp } from 'vue'
import App from './App.vue'
createApp.mount

• 根组件模板，保持最小化以快速验证环境是否正常。

/* 可选的 Composition API */