环境准备（必需）
-
安装Node.js
- 访问 Node.js官网 下载LTS版本（推荐18.x+）
- 安装后验证：
node -v # 显示版本号（如v18.16.0） npm -v # 显示npm版本（如9.5.1）
-
配置镜像加速（可选但推荐）
提升依赖下载速度：npm config set registry https://registry.npmmirror.com
安装Vue CLI（官方脚手架工具）
-
全局安装Vue CLI
npm install -g @vue/cli # 或使用yarn yarn global add @vue/cli
-
验证安装成功
vue --version # 显示版本号（如@vue/cli 5.0.8）
创建Vue项目
-
初始化项目
vue create my-vue-app # "my-vue-app"为项目名
-
选择配置
- 通过方向键选择预设：
Default：默认配置（Babel + ESLint）Manually select features：手动选择特性（推荐）
- 手动模式下勾选所需功能（如Router, Vuex, CSS Pre-processors）
- 通过方向键选择预设：
-
等待依赖安装
完成后提示：🎉 Successfully created project my-vue-app.
启动开发服务器
-
进入项目目录并运行
cd my-vue-app npm run serve
-
访问应用
浏览器打开：http://localhost:8080 # 显示Vue欢迎页
项目构建与部署
生成生产环境代码：
npm run build # 输出到 /dist 目录
常见问题解决
-
权限错误（Mac/Linux）
在命令前加sudo：sudo npm install -g @vue/cli
-
旧版本冲突
卸载后重装：npm uninstall -g vue-cli # 移除旧版 npm install -g @vue/cli # 安装新版
-
端口占用
修改启动端口：npm run serve -- --port 3000
-
依赖安装失败
清除缓存并重试：npm cache clean --force rm -rf node_modules npm install
进阶工具推荐
- Vite（高性能替代方案）：
npm create vite@latest my-vite-app -- --template vue
- 图形化界面管理：
启动：vue ui
通过Node.js环境安装Vue CLI，可快速创建标准化Vue项目，遵循官方工具链能确保项目结构规范、依赖管理高效，首次安装需重点关注环境配置，遇到问题优先检查Node.js版本及网络权限。
引用说明基于Vue.js官方文档（v3.x）及CLI工具实践验证，参考来源包括：
- Vue CLI官方指南
- Node.js安装文档
- npm社区常见问题解决方案
原创文章，发布者：酷番叔，转转请注明出处：https://cloud.kd.cn/ask/8127.html
