看一看：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/