叙述：Vue项目从环境安装配置到可视化创建教程 - 幽络源
概述幽络源的本篇教程将从node环境下载安装、镜像配置，到使用可视化面板创建vue项目，适用于前端初学者以及后端转全栈开发意向的小伙伴。
步骤目录
1下载nodejs安装器
2安装nodejs
3配置npm的国内镜像
4全局安装Vue脚手架
5创建Vue项目
6启动Vue项目
步骤1下载nodejs安装器
直接来到?nodejs下载器?
我这里选择版本v14的，然后点击msi按钮进行下载安装器
步骤2安装nodejs
直接双击或者比较好右键用管道理员方式打开安装器，然后一直点击next下一步（使用默认路径就行，保证过程顺利），到了如下图所示时，勾选然后继续下一步，比较后点击install即可完成安装
步骤3配置npm的国内镜像
以管道理员方式打开cmd控制台，然后执行如下命令查看镜像源
npmconfiggetregistry
如上图，如果你看到的结果不是registrynpmmirrorcom
那么再次执行如下命令，将其切换为国内镜像
npmconfigsetregistryregistrynpmmirrorcom
提示：切换为国内镜像是因为后续在下载模块时速度更，防止用国外镜像下载失败
步骤4全局安装Vue脚手架
执行如下命令，全局安装VueCLI，也称为Vue脚手架
npminstall-g@vuecli
如图，我这里由于下载过，这里显示更新了8个包
步骤5创建Vue项目
cmd进入控制台，执行如下命令启动vue项目管道理可视化面板
vueui
此时会自动打开浏览器，进入面板，点击左上角按钮的子菜单-项目管道理器
切换到创建，选择一个你期望创建项目的目录，然后点击在此创建新项目，如图
然后填写项目称，选择npm管道理器，git不使用则可以取消勾选，如图为幽络源的配置
点击下一步后，在这里我们选择手动，我这里会以手动创建vue2为例，如图
然后除了自动被勾选的连个选项，我们还需要将router勾选，这是项目必备的，如图
继续下一步，版本选择2X，代码规范工具选首就行了
比较后点击创建项目，点击不用保存预设，等待创建完成即可
步骤6启动Vue项目
在文件管道理中可以看到我们指定的目录下已经创建好vue相关的东西了，如图
方便起见，这里使用cmd控制台启动项目，比较好是用管道理员方式打开cmd控制台，然后来到项目根目录，我这里也就是test目录，执行npmrunserve即可，如图
保持控制台打开状态，在浏览器中访问localhsot:8080即可，如图访问后看到的是vue创建后的默认界面
结语
以上是幽络源的Vue项目从环境安装配置到可视化创建的教程，如有不懂之处，或者对全栈感兴趣的同道中人，欢迎加入我们=QQ群号：307531422
即便如此，源码网也要坚守行业的品质，为公司打造独一无二的产品。提供经过严格测试的免费源码、各种线上兼职和网络兼职的网创教程、编程及网络相关的技术教程分享，助您轻松获取资源和技术支持。https://www.youluoyuan.com/https://www.youluoyuan.com/wp-content/uploads/2025/03/5e5119692449737477f13dd890d31604.png
页:
[1]