NativeScript-Vue 2.0: Back to the Vueture (Webinar) is now on YouTube
升级指南

预计升级时间: 10-20 分钟

如果您使用1.3.1版本的Vue-CLI模板搭建了NativeScript-Vue应用程序,则可以升级到最新版本2.0,本指南将帮助您实现这一目标。新模板与旧版本具有不同的文件夹结构:

New folder structure

步骤 1

首先使用Vue-CLI模板创建一个新应用程序。

提示: 确保在这个新项目中使用与创建旧版本时相同的预安装命令;例如,如果您第一次在CLI中安装了Vuex,那么现在再做一次。

$ npm install -g @vue/cli @vue/cli-init
$ vue init nativescript-vue/vue-cli-template <project-name>
$ cd <project-name>
$ npm install
$ tns run android --bundle
$ # or
$ tns run ios --bundle

升级过程涉及将旧应用文件复制到新项目中,然后重新整理并添加一些文件。

第2步:替换应用资源

复制旧应用的 App_Resources 文件夹 ./template/app/ 并将其粘贴到新应用的 app 文件夹中,替换其 App_Resources 文件夹。

第3步:合并 srcapp 文件夹

复制 src 旧应用中的所有文件夹,然后将其粘贴到 app 新应用中的文件夹中。

第4步:编辑 main.js

NativeScript 4.0引入了一个新的Frame元素,并引入了一种更改应用程序根元素的方法,允许跨页面共享公共视图元素(导航)。

在4.0之前,根元素是一个Frame,它是在我们的应用程序启动时由NativeScript隐式创建的。

通过这些更改,我们无法再自动创建Frame和Page元素,因此在2.0.0中,您需要将这些元素显式添加到模板中。

要保持以前具有单个根框架的行为,可以将根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()

允许我们在不同的页面上使用共享的SideDrawer,例如:

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

然而,其最简单的形式是,类似于编辑 main.js的Vue初始化块:

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

第5步:编辑路径

由于文件夹结构已更改,您需要编辑新应用程序中的路径以指向样式,字体和图片。

在您的组件中,如果您的旧应用程序中的图片引用如下:

<Image v-if="surprise" src="~/images/NativeScript-Vue.png"/>

改变路径:

<Image v-if="surprise" src="~/assets/images/NativeScript-Vue.png"/>

第6步:对齐 package.json

将旧应用根 package.json 文件中的相关值复制到新应用的根 package.json 文件中。这很可能需要复制 Dependencies: 模块,但您可能还需要在package.json中重新调整新应用程序的应用程序版本和描述 。

第7步:清洁并运行

此时,有个好方法就是清理新应用程序的文件夹(如果您之前已经运行它)并重新安装所有依赖项。

$ cd <project-name>
$ rm -rf platforms
$ npm install
$ tns run android --bundle
$ # or
$ tns run ios --bundle

步骤8(可选):尝试HMR

就在最近,nativescript获得了对HMR(热模块更换)的支持。最新版本的NativeScript-Vue支持开箱即用,但您需要安装最新(最好)的NativeScript CLI版本。

$ npm install -g [email protected]
$ cd <project-name>
$ rm -rf platforms
$ tns run android --hmr
$ # or
$ tns run ios --hmr
Contributors