Behold! NativeScript-Vue 2.0!

NativeScript-Vue，NativeScript 的运行时实现，支持 Vue.js 框架，在我们在 Vue.Amsterdam 的舞台上发布 1.0 后的短短七个月内就达到了 2.0 版本。核心贡献者 Igor Randjelovic 和一群值得信赖的社区成员，包括 Tiago Alves、Kamen Bundev、Manuel Saelices、Pascal Martineau、Vasil Trifonov、Rahul Kadyan、Ludovic Bois de Fer 等等的辛勤工作，最终为您带来了一个非常稳定的版本，其中包括

tl;dr; 新模板、Sidekick 集成、HMR、框架支持、函数式组件、DevTools（哇！）和新文档

加入我的网络研讨会，我们将深入探讨此版本，并享受创建应用程序和使用 DevTools 的乐趣！现在注册这里。

简化的模板

当我们首次推出通过 Vue CLI 创建 NativeScript-Vue 应用程序的标准系统时，移动应用程序的文件夹结构与通过 Vue CLI 搭建的 Web 应用程序的文件夹结构有些相似。

开发人员在 /src 文件夹中编写应用程序的屏幕和逻辑，该文件夹包含 /assets、/components 以及应用程序的其他部分，例如 Vuex 存储。
/template 文件夹包含 /App_Resources 文件夹，这是移动应用程序存储其图标和启动屏幕的地方。此文件夹对于构建过程是必要的。
最后，移动应用程序的构建版本存储在 dist 文件夹中，该文件夹包含最终将在应用程序准备好发布时上传到应用商店的所有资产。应用程序使用 npm 命令运行，例如 npm run watch:ios 来启用 LiveSync，该功能会监视更改并刷新模拟器或设备中的应用程序。

旧文件夹结构与新文件夹结构对比

现在，新的 Vue-CLI 模板已大大简化，使其与标准 NativeScript 移动应用程序的文件夹结构保持一致。现在，当您想使用此模板时

导航到您想要放置应用程序的文件夹
在命令行或终端中，在您的终端中键入 vue init nativescript-vue/vue-cli-template myapp。
cd myapp
npm install 应用程序的依赖项
使用 tns 命令运行应用程序：tns run ios/android --bundle。bundle 标志对于 webpack 构建应用程序是必要的。

您甚至可以使用新模板尝试新的 HMR（热模块替换）功能，该功能已开始得到 NativeScript 的支持。确保您已安装最新版本的 NativeScript（npm i -g nativescript@next），然后运行 tns run ios/android --hmr)

立即尝试使用该模板，您会惊喜地发现！如果您一直在使用旧模板，我们已准备了一个方便的升级指南来帮助您从 1.3.1 升级到 2.0。

对 NativeScript 4.x `<Frame>` 更改的支持

NativeScript 4.0 引入了新的 Frame 元素，并引入了一种更改应用程序根元素的方法，允许通过导航在页面之间共享通用视图元素。在 4.0 之前，根元素是 Frame，它是应用程序启动时由 NativeScript 隐式创建的。

随着这些变化，我们不再能够自动创建 Frame 和 Page 元素，因此在 NativeScript-Vue 2.0 中，您需要在模板中显式添加 <Frame> 和 <Page> 元素。

为了保持之前只有一个根 Frame 的行为，您可以更改您的根 Vue 实例，使其包含一个 <Frame> 和一个 <Page> 元素。

示例

// in prior versions
// this automatically created a Page
new Vue({
  template: `<Label text="Hello world"/>`
}).$start()

// in 2.0.0
// the <Frame> and <Page> must exist in your template
new Vue({
  template: `
    <Frame>
      <Page>
        <Label text="Hello world"/>
      </Page>
    </Frame>
  `
}).$start()

这使我们能够在一个共享的 RadSideDrawer 中使用不同的页面，例如

new Vue({
  template: `
    <RadSideDrawer>
      <StackLayout ~drawerContent>...</StackLayout>
      <Frame ~mainContent>
        <Page>
          <Label text="Hello world"/>
        </Page>
      </Frame>
    </RadSideDrawer>
  `
}).$start()

但是，在新的 Vue-CLI 模板中，您可以简单地依赖于 main.js 中已经存在的对 Vue 初始化的增强功能

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

函数式组件

NativeScript-Vue 中的所有元素现在都是函数式 Vue 组件。此更改不应影响性能，并且是为了使调试更容易。我们一直在努力将 VueDevtools 带入 NativeScript-Vue，通过此更改，您现在可以在 devtools 组件树中看到本机元素。

新文档

NativeScript-Vue.org 已得到增强，以提供此版本的文档。较早的版本也已记录在案。

Sidekick 集成

使用新的 Vue CLI 模板文件夹结构，NativeScript Sidekick 集成现在可以用于您的 NativeScript-Vue 应用程序。Sidekick 是 NativeScript CLI 的抽象，允许通过桌面应用程序进行快速开发。使用模板搭建一个应用程序，并在 Sidekick 中打开它。选择设备，并确保 Webpack 复选框已选中，您就可以从该环境中开始开发您的应用程序。

支持 NativeScript UI 组件

使 NativeScript UI 组件与 Vue 兼容是一个漫长的过程，但我们很高兴地宣布 RadSideDrawer 和 RadListView 两个最常用和最受欢迎的组件已经可以使用，您可以立即在您的 NativeScript-Vue 应用程序中使用它们。

如果您对该 NativeScript UI 演示代码感兴趣或好奇，请访问 ns-ui-vue-demo 代码库并四处看看。此代码库还启用了 Vue DevTools，这也是我的最后一点

Vue DevTools!

由于 Vue 核心团队的好人们，特别是 Guillaume Chau 和 Rahul Kadyan 的努力工作，以及 Igor 的额外润色，您现在可以使用出色的 Vue DevTools 调试您的 NativeScript-Vue 应用程序！

查看如何在 NativeScript-Vue.org 上使用 DevTools 的指南。

NativeScript-Vue 的旅程一直非常精彩。加入我们，我们将通过支持 Vue DevTools 和使用 Vue-CLI 插件创建移动应用程序等酷炫项目，加深我们与 Vue 生态系统的集成。好奇吗？兴奋吗？加入我们 Slack 的 #vue 频道，我们聊聊吧！