环境准备(必需)
-
安装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