Vue脚手架项目创建 --保姆级教程

Vue-项目创建

这里我默认已经安装好了脚手架，没装得可以看我上篇博客的安装教程。脚手架安装教程

脚手架提供了两种创建方式，我们以 vue ui 作为示例……

 1.输入 vue ui  进入图形界面进行项目配置

        选择 一个你 的项目的存放路径，各自都不相同，比如我这里是  D:\code\web\web_Vue\vue项目 ，选择好路径后，用cmd 打开，输入  vue ui 开始配置

2.进入图像界面后，进行项目创建

        配置项目信息，按照我下面的图片来配置，项目名称自己随便起，然后关掉 git 仓库，我们暂时用不到……

接着选择手动配置，下一步

打开 Router 功能其他不变，下一步

        进行最后的配置，vue 版本选择 3  ，现在应该大多数用的都是3 吧，如果你的版本是 2 那你就选择2，接着下一步进行创建

        点击创建后提示你是否要将你的设置保存为一套模板，这里选择不，耐心等待创建（此过程需要联网哦……）

3.创建成功

差不多一分钟左右等待创建成功后，界面会变成这样，说明你已经创建成功了……

Vue-项目结构介绍

创建好后，可以看到下载了一堆文件，我们用VScode 打卡，来逐个了解一下这些文件

Vue-项目启动

        这里提供两种运行方式，第一种就是IDE的图形化界面启动项目，第二种是命令行方式运行。

这里以VScode为例……

 点击上面 ...  开启大纲和npm脚本，然后点击下面启动项目

第一次启动会有点慢，启动成功后会显示两个连接，我们直接访问第一个链接。

 打开链接后，我们会来到这个界面，这个也就是 App.vue 这个文件构成的根菜单……

 

修改端口配置

打开vue.config.js文件，加入下面这段话即可修改。

        我顺便解释一下为什么要修改端口，它默认的是 8080 端口，因为我们后面学到 Tomcat 服务器部署Java代码的时候，它默认的端口也是8080 会发生冲突，所以我们这里修改一下。

我这里修改端口为7001，然后重新启动项目可以看到，端口已经修改成功了……

总结

        我们详细探讨了如何使用 Vue CLI 创建和启动 Vue 项目，从项目的配置到结构的理解，再到实际的运行和端口修改。

        希望通过这篇文章，您能够轻松上手 Vue 开发，探索更多前端技术的可能性。无论是构建小型项目还是大型应用，掌握这些基础知识都是至关重要的。

        如果您有任何问题或建议，欢迎在评论区留言，让我们一起交流学习！