将路由添加到Vue.js cli 3.0应用程序

Question

新的Vue.js 3.0插件架构很好，但似乎缺少了一个路由器插件。如果我在最初创建项目时选择不安装路由器（vue create my-project），我希望以后可以改变主意并使用类似于vue add @vue/router这样的方式添加路由器，但是该插件似乎不存在。有没有一种方法可以事后通过CLI添加路由？

- Jim Cooper

---

Vuejs 3还是Vue-cli 3？如果您不是在谈论Vuejs 3，那么您可以按照此指南，在创建项目后添加plugin=router。NPM的Vue Router安装指南 - Sphinx

是的，vue-cli 3。我已经手动添加了路由，但我很惊讶没有一个插件可以帮我完成这个设置，因为似乎在初始cli安装中已经有一个插件了。 - Jim Cooper

@Sphinx 我相信Vue 3目前还不存在。而vue-cli 3是完全不同的东西，路由可能被打包进了vue-cli-service中。 - Ru Chern Chong

Answer 1

在尝试了vue-cli3之后，我发现你可以使用vue add来设置你所需的组件。

使用vue add router来配置路由并创建一些示例组件（如Home和About）。

这也适用于其他模块，例如使用vue add vuetify添加vuetify。您可以从插件和预设指南中了解更多有关vue add的信息。

- Isaac Obella

---

谢谢你节省了我的时间 :-) - Bhagvat Lande

警告！我刚刚这样做了，它覆盖了我的App.vue文件。在使用vue add router之前，最好将您的App.vue文件重命名。 - Dave

最安全的方法是在运行任何Vue任务之前先提交您所有的更改。 - Isaac Obella

Answer 2

请查看此处的问题页面：https://github.com/vuejs/vue-cli/issues/1202，结论是如果您最初没有选择路由器，则无法使用cli添加路由器。

1. 在修改入口文件后再添加路由器非常脆弱。
2. 如果您没有对文件进行大量修改，可以重新生成项目。
3. 如果我们只添加依赖项并跳过修改文件的部分，那么只需npm install vue-router或yarn add vue-router即可轻松完成。

- Frank Ma

---

实际上，您可以使用 vue-cli 3.0.0 版本以上的版本通过运行 vue add router 命令来延迟添加 vue-router，尽管您提到的评论表示该功能不可用。不过，该功能已被添加进去了。 - tony19

但它不会更新您已更改或删除的文件。因此，如果您已经工作了一段时间，它就不是那么有用了。 - vichle