使用 NativeScript-Vue 共享代码

每当开发人员听到关于不写代码的可能性时，他们都会非常兴奋。这似乎很奇怪，因为我们每天的工作就是写代码。这不是说我们天生懒惰，而是说，当有机会优化我们的工作流程时，我们通常会抓住它。

我有好消息要告诉你！

由于社区成员 Gary Gambill (@jawa-the-hutt on Slack) 和 Manuel Saelices 的大力支持，以及 NativeScript-Vue 作者和维护者 Igor Randjelovic 的共同努力，我很荣幸地向大家介绍一个全新的 Vue CLI 插件，它可以让那些热爱 Vue.js 的人以非常轻松的方式在 Web 和移动之间共享代码。

注意： 在我们的网络研讨会中了解更多关于 NativeScript-Vue 和 Web/移动代码共享的最新信息，"NativeScript 的另一个 Vue"！

介绍 NativeScript-Vue CLI 插件

如果你和我一样是 Vueliever，你会喜欢使用为 Vue 开发人员提供的工具来促进移动应用程序开发。所以，现在就打开 Vue UI，开始搭建一个新的代码共享项目。

在 Vue 项目管理器中，创建一个新的 Vue 项目。我在我的设置中有一个预设，它允许我选择 Eslint、Babel、Stylus、Vuex 和 Vue Router，所以我使用了它，但如果你不担心添加 Vuex 和 Vue Router，默认的 Vue 设置也适用。

如果你打算使用 TypeScript 构建你的应用程序，现在就是选择它的时候了！

然后，在插件屏幕上，搜索名为vue-cli-plugin-nativescript-vue的 NativeScript-Vue 插件。你会认出它，因为它有个很酷的 logo。

在下一个屏幕上，系统会提示你通过一系列提示来配置插件。预设很好，只要确保使用你自己的应用程序标识符。关于“这是一个全新的项目”的问题，将此插件添加到现有项目将对 Web 项目执行“非破坏性”的移动应用程序添加操作。如果你从一个全新的应用程序项目开始，你可以继续选择那个开关。

搭建完成后，你可以在代码编辑器中打开代码并开始工作。要在工作时运行应用程序，请使用插件中提供的npm run脚本构建、服务、调试，甚至预览（使用 Playground 应用程序）你的新 Web 和移动应用程序。

没有什么比同时看到你的 Web、iOS 和 Android 应用程序启动更令人兴奋的了。

对于你们这些纯粹主义者，当然，你也可以使用命令行来搭建你的应用程序。

无论哪种方式，最棒的是，你正在使用标准的 Vue 工具来搭建一个非常棒的代码共享应用程序策略。

看看代码内部

开箱即用，搭建的代码可以在 Web 和移动端运行，并且精心创建，以提供你可能使用的各种代码共享策略的示例。

代码是什么样的？Gary 和 Manuel 非常谨慎地使这个插件尽可能灵活，涵盖了许多策略和使用案例来共享代码，以增强开发人员体验。例如，看看两个文件main.js和main.native.js。由于它们是移动和 Web 应用程序的入口点，并且可能包含单独的平台插件，因此它们通过命名约定区分。任何名为*.native.*的文件只会在移动设备上渲染。

挂载一个 Web 应用程序

启动一个 NativeScript-Vue 应用程序

现在看看App.vue，它是单一的入口点，也是第一个包含共享模板的 Vue SFC。

如果你没有太多标记，你可以轻松地创建一个完全共享的文件，其中各个部分根据平台进行指定。此外，在这个文件中，你可以在平台之间共享一个脚本块；只有每个平台使用的 methods 会被获取。

在这个文件中，也给出了一个 fork 风格的示例：只导入与你的平台相关的样式。

当你浏览项目时，你会发现许多其他好东西，包括一个待使用的共享 Vuex 存储。

还有一个带共享样式的样式表的示例。

说到共享样式，资产也可以通过将它们放在提供的assets文件夹中来共享。

可选地，你可以在移动端甚至可以根据平台分离模板；其中包括一个针对 Web 和 native 分开的 SFC 的示例（HelloWorld.vue 和 HelloWorld.native.vue），还可以选择分别在 iOS 和 Android 上工作（HelloWorld.ios.vue 和 HelloWorld.android.vue）。

由于生成的代码结构中固有的灵活性，开发人员在使用 fork 文件、fork 模板、作用域样式以及在应用程序组件之间进行的共享量方面拥有很大的自由。该插件允许你根据项目的需要做出重要的架构决策，同时提供多种选择。

路由呢？ 由于 Vue Router 不支持移动设备，我们建议在 Web 应用程序中使用 Vue Router，并在移动设备上使用手动路由策略。该团队正在努力开发一种更复杂的解决方案，允许在 Web 和移动设备上共享路由，但目前，以上建议是我们的推荐。

示例应用程序

我构建了一个有趣的演示来展示这种代码共享策略，该演示分阶段构建。我需要为我计划创建的演示构建一个插件，所以它首先出现。然后我分别构建了 Web 应用程序和移动应用程序。最后，我使用新插件搭建了一个共享代码库，并将我的移动和 Web 应用程序移植到那个新项目。你可以在这里找到所有代码。该应用程序允许用户在移动设备上创建曼荼罗的部分，然后在 Web 上构建和显示。你甚至可以在 Web 应用程序中控制曼荼罗旋转的速度。

 

你将用你新组合的代码库创建什么？加入 NativeScript Slack 的 #vue 频道，让我们聊聊。一定要向这个项目的核心贡献者表示敬意，他们是真正的 Vue 英雄！