目录
Vue3.js项目的创建
这篇文章的目的很简单，就是创建项目，创建完了，至于怎么搞，请参考其他后面推荐的相关课程。
官网
参考文档：
https://vuejs.org/guide/quick-start.html
环境需要
安装node.js
Node.js 是一个 JavaScript 的运行时环境，可以让 JavaScript 脱离浏览器运行。
以前我们写 JavaScript，主要是在浏览器里执行的。比如 Chrome 浏览器内部有一个 V8 引擎，专门负责执行 JavaScript。
后来 Node.js 使用了 Chrome 的 V8 引擎，并在它的基础上提供了文件读写、网络通信、进程管理等能力，使得 JavaScript 不仅可以在浏览器里运行，也可以直接在服务器上运行。
所以可以粗略地把 Node.js 类比成 Java 的 JVM，都是为程序提供一个运行环境。当然两者的实现原理并不一样，这个类比主要是为了方便理解。
有了 Node.js 以后，JavaScript 就不再只是前端语言了。前端工程师也可以使用熟悉的 JavaScript 来开发后端程序，比如提供 HTTP 接口、操作数据库、读写文件等。
node.js的官网
https://nodejs.org/zh-cn,下载页面：https://nodejs.org/zh-cn/download
直接用命令去安装，或者下载安装包都可以
我这里是安装好的了，可以在命令行里查看Node的环境
shell
复制代码
(base) trillgates@TrilldeMacBook-Pro frontend % node -v
v22.14.0有版本号就可以了，但是我的版本有点老旧了，不过我的是用nvm管理的
shell
复制代码
(base) trillgates@TrilldeMacBook-Pro frontend % nvm list
v16.20.2
v18.20.8
v20.18.3
-> v22.14.0
system
default -> v22.14.0
iojs -> N/A (default)
unstable -> N/A (default)
node -> stable (-> v22.14.0) (default)
stable -> 22.14 (-> v22.14.0) (default)
lts/* -> lts/jod (-> N/A)
lts/argon -> v4.9.1 (-> N/A)
lts/boron -> v6.17.1 (-> N/A)
lts/carbon -> v8.17.0 (-> N/A)
lts/dubnium -> v10.24.1 (-> N/A)
lts/erbium -> v12.22.12 (-> N/A)
lts/fermium -> v14.21.3 (-> N/A)
lts/gallium -> v16.20.2
lts/hydrogen -> v18.20.8
lts/iron -> v20.19.5 (-> N/A)
lts/jod -> v22.20.0 (-> N/A)
(base) trillgates@TrilldeMacBook-Pro frontend % nvm，其实就是node vm，我有好多老旧的项目，有时候需要切换到旧的版本去，所以用nvm是合适的。
总之，node -v 能看到版本号了，说明安装成功了。
项目创建
有了node环境以后，就可以创建项目了：
shell
复制代码
npm create vue@latestnpm，就是node package manager，node包管理器，命令是create创建，vue@版本号，这里是latest，也就是最新版本。也可以指定版本
比如说：
shell
复制代码
(base) trillgates@TrilldeMacBook-Pro frontend % npm view create-vue versions
[
'0.0.1', '1.0.0', '1.0.1', '1.0.2',
'2.0.0', '2.0.1', '2.0.2', '2.0.3',
'2.0.4', '2.0.5', '2.0.6', '2.1.0-beta',
'2.1.0', '2.1.1', '2.2.0', '3.0.0-alpha.0',
'3.0.0-alpha.1', '3.0.0-alpha.2', '3.0.0-alpha.3', '3.0.0-beta.0',
'3.0.0-beta.1', '3.0.0-beta.2', '3.0.0-beta.3', '3.0.0-beta.4',
'3.0.0-beta.5', '3.0.0-beta.6', '3.0.0-beta.7', '3.0.0-beta.8',
'3.0.0-beta.9', '3.0.0-beta.10', '3.0.0', '3.0.1',
'3.0.2', '3.0.3', '3.0.4', '3.0.5',
'3.0.6', '3.0.7', '3.1.0', '3.1.1',
'3.1.2', '3.1.3', '3.1.4', '3.1.5',
'3.1.6', '3.1.7', '3.1.8', '3.1.9',
'3.1.10', '3.1.11', '3.1.12', '3.2.0',
'3.2.1', '3.2.2', '3.2.3', '3.3.0',
'3.3.1', '3.3.2', '3.3.3', '3.3.4',
'3.4.0', '3.4.1', '3.5.0', '3.6.0',
'3.6.1', '3.6.2', '3.6.3', '3.6.4',
'3.7.0', '3.7.1', '3.7.2', '3.7.3',
'3.7.4', '3.7.5', '3.8.0', '3.9.0',
'3.9.1', '3.9.2', '3.10.0', '3.10.1',
'3.10.2', '3.10.3', '3.10.4', '3.11.0',
'3.11.1', '3.11.2', '3.12.0', '3.12.1',
'3.12.2', '3.13.0', '3.14.0', '3.14.1',
'3.14.2', '3.15.0', '3.15.1', '3.16.0',
'3.16.1', '3.16.2', '3.16.3', '3.16.4',
'3.17.0', '3.18.0', '3.18.1', '3.18.2',
'3.18.3', '3.18.4', '3.18.5', '3.19.0',
'3.20.0', '3.21.0', '3.21.1', '3.21.2',
'3.22.0', '3.22.1', '3.22.2', '3.22.3',
'3.22.4', '3.23.0', '3.24.0'
]
可以指定版本
shell
复制代码
# 我创建了这么个目录
cd ./course/vue3/project-create
# 创建项目
npm vue create@3.24.0
# 接下来，就是创建的过程
以上就创建完了，创建完以后，就可以了，进入到目录里面，用npm install命令安装相关的依赖，安装完以后就可以运行了。
运行的命令是
shell
复制代码
npm run dev如图：
首先，我是install安装，然后我运行了npm run dev，也就是package.js里面的dev开发
运行完以后，提示，可以本地的地址是http://localhost:5173
在浏览器里打开这个地址
创建完项目以后，就可以学习一下相关的课程了
推荐课程
本文由 拉大锯 原创发布于 阳光沙滩 ， 未经作者授权，禁止转载
评论
0 / 1024
康师傅开始水文章了，哈哈
2026-10-02 13:25回复
拉大锯回复@东子(康师傅开始水文章了，...)： 点错了，应该是保存草稿的。点了发布吧。
2026-10-02 13:46回复
东子回复@东子(康师傅开始水文章了，...)： 我看最后，看样子是要到时候放到课程 文档里的
2026-10-02 13:55回复
推荐文章
Vue3.js项目的创建
本文详细介绍了如何使用Vue3创建项目，包括Node.js的安装和配置，以及项目的初始化过程。适合初学者学习如何快速搭建Vue3开发环境，并推荐了相关课程供进一步学习。
Network Tools : 您的运维“助手”升级了
Network Tools是一款专为解决运维难题而设计的软件，集设备管理、配置备份、性能监控和告警处理于一体。通过统一的工作台，帮助运维人员更高效地管理资产、定位故障并提升团队协作效率。无论是设备在线状态还是具体问题排查，都能得到全面支持。
Ubuntu 软件安装与彻底卸载指南
本文详细介绍了在 Ubuntu 系统中如何规范安装和彻底卸载 .deb 格式软件，包括依赖修复、残留清理以及图形化工具推荐，适合需要维护系统环境的用户。
JavaWeb开发客户程序更新特殊环境下的骚操作
本文分享了在无外网环境下，如何利用Docker和docker-compose实现高效部署的实战经验。通过基础镜像和本地jar包挂载的方式，解决了内网环境下的依赖问题，适合需要灵活部署方案的技术人员参考。
Linux 防火墙完全指南：从原理到多发行版实战
本文全面解析Linux防火墙的底层原理与主流工具配置，涵盖UFW、firewalld、iptables、nftables等方案，适合不同发行版用户。从基础概念到生产环境加固建议，助你掌握核心安全策略，确保服务器与网络的安全运行。
水上派对英语单词篇
探索FLOATOPIA水上派对的完整指南，涵盖签到流程、场地指引、安全须知、活动安排及夜场舞会等实用英语词汇与对话。无论是初学者还是老手，都能轻松掌握关键术语，享受完美水上体验。
麒麟操作系统下使用 virt-customize 重置虚拟机 root 密码实战
本文详细介绍了在麒麟操作系统环境下使用 virt-customize 工具重置 KVM 虚拟机 root 密码的完整流程，包含安装步骤、常见问题及解决方案，帮助运维人员高效处理密码遗忘或批量初始化场景，避免数据丢失。
浅析JS预编译-函数篇
本文详细讲解了JavaScript中函数的预编译过程，包括AO对象的创建、变量和函数声明的提升，以及执行阶段的变化。适合初学者了解JS执行机制，帮助深入理解代码运行逻辑。
访问Github的另一种姿势
本文介绍了如何通过Watt ToolKit等工具加速访问Github，适合对网络技术感兴趣的读者。内容涵盖工具介绍、下载和使用方法，以及一些实用技巧，值得一看。
使用Gulp压缩JS
本文详细介绍了如何使用Gulp压缩JavaScript文件，特别是支持ES6语法的处理方法。通过实际操作和效果对比，帮助开发者提升代码性能，适合对前端自动化工具感兴趣的读者。
使用Gulp压缩CSS
本文详细介绍了如何使用Gulp工具对CSS文件进行压缩，提升网页加载速度。适合需要优化静态资源的开发者，提供清晰的步骤和示例，帮助快速上手。
从0部署Nuxtjs项目
本文详细介绍了如何将Nuxt.js项目部署到公网，涵盖Node.js安装、环境配置、源码上传及使用PM2启动服务的全过程，适合开发者学习和实践。
Linux 命令行美化利器：tree 命令完全指南（安装 + 全部参数详解）
掌握 Linux 下的 `tree` 命令，快速直观地查看目录结构。本文详细讲解安装方法、参数含义及实战场景，适合开发者和系统管理员提升工作效率。
Linux常用命令（一）
本文详细介绍了Linux基础命令，包括文件操作、系统显示、网络状态、软件包管理等，适合初学者学习和查阅，是掌握Linux系统的实用指南。
大模型推理参数解码：温度、Top-p 与核采样如何塑造生成文本的灵魂
探索大语言模型的采样参数如何塑造生成内容，从温度到Top-p，从惩罚机制到熵控制，揭示背后的信息论原理与实践策略。了解如何通过参数调优，让AI既保持知识的严谨，又拥有创造力的自由。
记从0使用Claude code写代码
本文介绍了如何使用Claude Code搭配DeepSeek进行编程，详细讲解了安装Node.js、全局安装Claude、配置模型以及使用方法。对于开发者来说，这是一份实用的技术教程，尤其适合对AI编程工具感兴趣的读者。
Android-Studio-Gradle同步失败-Library为null的通用排查指南
遇到 Android Studio Gradle Sync 失败时，不要轻易删除全局缓存。本文详细解析了错误原因，并提供了一系列精准的排查步骤和解决方案，帮助开发者快速定位并解决问题，提升开发效率。
PHP实现密码加密
本文详细介绍了Bcrypt密码加密技术及其在PHP中的应用，帮助开发者提升用户密码的安全性。通过实际代码示例，展示了如何使用password_hash和password_verify函数进行密码加密与验证，是学习网络安全知识的实用指南。
WordCloud效果，滚动标签
本文详细介绍了如何在Vue项目中集成WordCloud组件，包括依赖安装、属性配置和使用方法。适合开发者学习如何实现数据可视化功能，提升项目交互体验。
从0使用WordPress搭建一个优美的网站
本文详细介绍了如何使用WordPress搭建一个美观的网站，从安装到主题配置和功能拓展，为读者提供了实用的操作指南。无论是初学者还是有一定经验的开发者，都能从中获得有价值的参考。
JS实现在网站底部添加运行时间
想知道如何在网站底部显示运行时间？本文详细讲解了通过JavaScript实现这一功能的方法，包括时间计算逻辑和代码实现。适合前端开发者学习参考，轻松为网站添加实用功能。
在Vercel上部署Hexo博客
本文详细介绍了如何在Vercel上快速部署Hexo博客，无需后端服务即可实现高效发布。相比传统方式，省去了手动生成和上传静态文件的步骤，更加便捷。适合想要搭建个人博客的开发者参考。
从0搭建一个Hexo博客
本文详细介绍了Hexo博客框架的使用方法，从安装到部署全流程讲解，适合想快速搭建个人博客的技术爱好者。内容清晰易懂，是入门Hexo的理想指南。
离线设备激活方案：古老的 Windows 光盘激活，离线算法授权等
本文深入解析了离线激活的核心原理与实现方式，从历史案例到现代技术，全面剖析了如何在无网络环境下确保软件授权的安全性。通过设备指纹、授权文件校验等手段，为开发者提供了可复用的架构设计思路，适用于工业、医疗等对网络依赖较低的场景。
Hexo实现生成站点地图
想为你的Hexo博客添加站点地图功能吗？本文详细介绍了如何通过安装插件和配置文件来实现，适合没有内置该功能的新主题或自定义主题的用户。简单步骤助你提升搜索引擎优化效果。
Hexo实现代码压缩
本文分享了如何通过Hexo插件优化博客性能，详细介绍了安装和配置过程，帮助提升网页加载速度。适合对网站优化感兴趣的开发者阅读。
记一次 GitHub 幽灵协作者大清洗：强制重写 Git 历史与穿透 CDN 缓存实践
本文详细讲解了如何解决GitHub上出现的‘幽灵协作者’问题，通过重写Git历史和穿透CDN缓存，彻底清理错误提交记录。适合开发者学习如何高效管理项目历史与优化仓库信息。
从一行 `native` 堆栈追到 InstallReferrer：一次主线程 ANR 的排查全过程
本文详细记录了一次主线程ANR的排查过程，从一行native堆栈追踪到InstallReferrer服务调用。通过分析堆栈、源码和系统调用，揭示了归因SDK在主线程同步调用Play商店服务导致的ANR问题，并提供了多维度的解决方案。对于Android开发者来说，是一篇深入浅出的技术实践指南。
Linux从 HelloWorld 到数据库服务注册
本文详细解析了Linux系统中服务注册的概念与实现，通过一个简单的Hello World示例，帮助读者理解如何将程序注册为systemd服务，并掌握相关操作命令。无论是数据库还是其他应用，了解服务注册机制都是系统管理的重要基础。
学习虚拟机的笔记
3