代码共享 - NativeScript-Vue 中文

此页面基于 Jen Looper 的博客文章使用 NativeScript-Vue 进行代码共享.

您可以使用 Vue.js 为 Web 编写应用程序。借助 NativeScript-Vue，您还可以编写移动应用程序。代码共享项目是指将 Web 和移动应用程序的代码保存在一个地方。了解如何使用 vue-cli-plugin-nativescript-vue 包实现代码共享。

首先，全局安装 Vue CLI

npm install -g @vue/cli

然后，搭建一个新的 Vue Web 应用程序

vue create web-mobile-project

导航到新创建的项目并添加 vue-cli-plugin-nativescript-vue

cd web-mobile-project
vue add vue-cli-plugin-nativescript-vue

系统会提示您配置插件。预设选项就可以了，只需确保您使用自己的应用程序标识符。关于“这是一个全新的项目吗”这个问题，将此插件添加到现有项目中会对 Web 项目进行“非破坏性”的移动应用程序添加。如果您从零开始创建一个应用程序项目，您可以继续选择该开关。

插件安装完成后，您可以使用插件中提供的 npm run 脚本运行 Web 和移动应用程序。

要构建 Web 应用程序并启动开发服务器，请运行

npm run serve:web

要预览移动应用程序，请运行

npm run preview:android
# or
npm run preview:ios

项目结构

在默认项目结构中，Web 和移动文件位于同一个目录下。例如，请查看两个文件 main.js 和 main.native.js。由于它们是移动和 Web 应用程序的入口点，并且可能包含单独的平台插件，因此它们通过命名约定进行区分。任何名为 *.native.* 的文件只会在移动设备上渲染。

挂载 Web 应用程序

main.js

import Vue from 'vue';
import App from '~/App.vue';

Vue.config.productionTip = false;

new Vue({
  render: (h) => h(App),
}).$mount('#app');

启动 NativeScript-Vue 应用程序

main.native.js

import Vue from 'nativescript-vue';

import App from './App.vue';

Vue.config.silent = false;

new Vue({
  render: h => h('frame', [h(App)]),
}).$start();

现在，请查看 App.vue，它是唯一的入口点，也是第一个具有共享模板的 Vue SFC

<template web>
  <div class="w-page">
    <div class="w-container">
      <img src="~/assets/logo.png" alt="logo" height="20%" width="20%">
      <HelloWorld :msg="msg"/>
    </div>
  </div>
</template>
<template native>
  <Page>
    <ActionBar :title="navbarTitle"/>
    <GridLayout rows="auto, auto">
      <HelloWorld :msg="msg"/>
    </GridLayout>
  </Page>
</template>

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

<script>
  import HelloWorld from '~/components/HelloWorld';

  const { VUE_APP_MODE, VUE_APP_PLATFORM } = process.env;

  export default {
    components: {
      HelloWorld,
    },
    data() {
      return {
        navbarTitle: `App.vue`,
        msg: `Mode=${VUE_APP_MODE} and Platform=${VUE_APP_PLATFORM}`,
      };
    },
    methods: {
    }
  };
</script>

在此文件中，还提供了一个分叉样式的示例：只导入与您的平台相关的样式。

<style web>
  @import '~styles/style-one';

  .w-page {
    height: 100%;
    width: 100%;
  }
</style>
<style native>
  @import '~styles/style-one';
</style>

您可以通过将资产放置在提供的 assets 文件夹中来共享资产。

可选地，您可以在移动设备上按平台分离模板；其中包含一个针对 Web 和原生设备进行分割的 SFC 示例（HelloWorld.vue 和 HelloWorld.native.vue），以及分别针对 iOS 和 Android 工作的选项（HelloWorld.ios.vue 和 HelloWorld.android.vue）。

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

路由呢？由于 Vue Router 在移动设备上不受支持，我们建议在 Web 应用程序中使用 Vue Router，并在移动设备上使用手动路由策略。团队正在努力找到一种更完善的解决方案，以便在 Web 和移动设备上实现共享路由，但目前为止，以上建议是我们的推荐方案。

展示应用程序

要查看 NativeScript-Vue 的真实代码共享项目，请查看 Jen Looper 的代码共享项目 mandala-me.

创建代码共享项目

项目结构

展示应用程序