Vue 修改项目名称总结
一、借鉴应用开源项目
在真实的软件项目开发环境中，为了能够更加快速便捷地开展工作，加速项目推进，同时，加上开源项目的支持。
通常可以在开源渠道上，获取成熟度高和评价好的开源项目，在此基础上进行适当修改，进而迅速开展项目软件开发工作。
应用开源项目，这是提高工作效率的极好策略，本质上，就是一种模型思维的体现。
这里需要注意，应用开源项目，虽然可以加速软件开发，但是，也要有心理准备，要能够掌控得住整个开源项目，毕竟，细节是魔鬼，里面可能隐含了各种各样的坑。因此，这需要警惕，需要小心。
二、说明
使用开源项目，不能直接拿来即用，需要修改一些文件信息，这是必要去做的。这些文件信息，包括不仅限于，项目名称、文件目录、文件名称、敏感内容等等。因此，为了避免未来不必要的麻烦，建议修改一些文件信息。
这里就以 Vue 项目为例，在 WebStorm 上介绍如何修改项目名称，当然，也会谈修改一些敏感信息细节。
三、操作步骤
1、引用开源项目
通过开源渠道，通常是 Gitee、Gitlab、GitHub 等，寻找到合适和成熟的开源项目。
这里选择使用 GitHub 上比较成熟的若依（ruoyi）开源项目，以此为基础进行软件开发。
项目名称为：
GitHub 远程仓库地址为：
GitHub 上搜索到的项目信息截图如下：
随后，在特定工作目录下，这里在桌面建立了一个 project 目录。随后，将项目克隆到这个目录上。为了更加方便的操作，使用 Git Bash 界面进行操作。随后直接使用 bash 代替 Git Bash，这样方便理解。
在 bash 上进行克隆操作，指令如下：
执行指令，结果截图如下：
项目文件目录截图如下：
2、修改项目名称
使用 WebStorm 打开项目，对于工具的选择，也可以使用其他比较成熟的前端开发集成开发工具。
打开后的界面如图所示：
这里需要注意，我们先不要进行 npm 相关操作。这样是为了避免 npm 操作之后新增了新的文件以及增加工作量。因为无论被动提醒执行还是主动执行 npm，都会生成一些新的文件。
2.1、修改 package.json 文件下的 name
在项目中找到 package.json 文件和 name 位置。
将该文件下的 name 进行变更，调整为新项目的名称，这里新项目的名称使用 project-new。
2.2、重命名项目名称
鼠标移至项目目录顶部的名称之上，点击右键，弹出窗口，在窗口选择 Refactor，再选择 Rename。
此时，弹出新的窗口，选择 Rename project。这里不选择 Rename directory，在于项目的目录正在 WebStorm 使用中，无法修改，随后，我们可以试验一下，看结果如何。
将项目名称更改为 project-new，点击 OK 按钮即可。
成功之后，会在 WebStorm 项目后显示新的项目名称。
2.3、WebStorm 工具下是否可以修改文件目录名称
重复以上步骤重命名项目名称的步骤，在 Rename 弹出的新窗口下，选择 Rename directory。
弹出新的窗口。
在这个窗口更改名称为 project-new，点击 Refactor 即可。
随后，WebStorm 弹出异常提示，说明无法修改，这也是为什么在上一步 2.2 时，说了不选择 Rename directory 的原因。
2.4、修改文件目录
来到项目的文件目录下，在这个目录对其进行修改。这里需要关闭 WebStorm，因为文件被程序使用，是无法进行修改的。
截图中展示了修改前和修改后的两种情况。
3、修改敏感信息
经过以上以后步骤之后，为了继续优化更新项目内容，接着使用 WebStorm 打开项目。
项目中的信息，不仅仅项目名称重要，还有一些敏感的内容也需要注意，适当的情况下，建议更改为新的内容。
比如，项目中的项目中文名称，就可以更改为新的项目中文名称。
这里以更改文件中的“若依”中文名称为例，将其变更为“新项目”名称。
使用一个工具，Windows 系统使用 Ctrl + Shift + R，可以方便快捷的修改替换相应文件内容。
根据弹出的窗口，输入查找替换的内容“若依”，而后输入更新后新的内容“新项目”。
我们根据需要，进而在窗口下可以选择 Replace，或者 Replace All，这里直接全部替换，故而选择 Replace All。
原来的“若依”，变成了“新项目”。
4、删除 Git 信息
由于这个项目是从开源项目上借鉴过来的，进而会具有相应的 Git 数据信息，为了能够更好的进行新的项目开发，删除过去的 Git 信息是有必要的。
因为，故去的 Git 信息，可能会带有各个分子，同时，会有不同的提交信息，这对于未来的排查是不利的，会造成很多误解。
在 WebStorm 上，通过选择 Git 相关选项，可以查看原来的版本历史信息。
我们可以使用 bash，在项目目录下打开，而后使用以下指令，即可实现 Git 过去信息的删除。
执行命令截图如下：
此时，WebStorm 会弹出窗口，提示缺乏 Git 信息。
我们选择 configure...，在弹出新的窗口中，选择无效的 git 信息，再选择窗口上减号“-”，去掉这个无效的 git 信息，最后，点击 Apply 即可。
这里需要提醒的是，由于指令是 rm，因此，Windows 系统下无法直接使用 dos 命令窗口，这也是为什么要使用 bash 的缘故了。
这样，原有的 Git 信息就被删除干净了。
5、执行 npm 相关指令，生成新的文件
针对这个新的项目，在 WebStorm 的 Terminal 终端上，执行以下命令，生成相应引用包。
这里，我们会发现一个新的文件 package-lock.json，里面也有项目的信息。
从标记的地方可以得知，项目名称使用了新的项目名称，即“project-new”。这也是为什么建议不要一开始就使用 npm 指令的原因所在，避免无效的工作。如果一开始就这样做了，那么，这个 package-lock.json 文件，我们同样需要自己去手动修改了，就非常麻烦了。
随后，再执行以下指令，看看项目是否可以运行。
新修改的项目运行结果如下：
这样，我们就可以在浏览器上以下输入地址进行访问了。
到这里，也说明了项目修改工作整体完成。之前把 Git 的信息删除了，这里需要针对新的项目，去生成新的 Git 信息。这里就不过多赘述如何添加 git 了，读者可以自行搜索查找。
最后，感谢阅读，如有不妥之处，还请指出。
强准备+强信念+强执行 2019-11-21 加入
以前是T型人才，当下是π型人才，未来是梳子型人才
评论