From 627f7d95f70371ce05427316f7a531bfe5b72332 Mon Sep 17 00:00:00 2001 From: Iva Koevska Date: Mon, 15 Oct 2018 14:14:53 +0300 Subject: [PATCH 1/2] Initial round of proofreading --- .../en/getting-started/4-upgrade-guide.md | 70 +++++++++++-------- 1 file changed, 39 insertions(+), 31 deletions(-) diff --git a/content/docs/en/getting-started/4-upgrade-guide.md b/content/docs/en/getting-started/4-upgrade-guide.md index 8eea84a7..0fc4902f 100644 --- a/content/docs/en/getting-started/4-upgrade-guide.md +++ b/content/docs/en/getting-started/4-upgrade-guide.md @@ -1,20 +1,24 @@ --- title: Upgrade Guide -contributors: [rigor789, jlooper] +contributors: [rigor789, jlooper, ikoevska] outdated: false --- > Estimated time for the upgrade: **10-20 minutes**. -If you scaffolded a NativeScript-Vue app using the 1.3.1 version of the Vue-CLI template, it's time to upgrade to the newest version, 2.0, and this guide will help you do that. The new template has a different folder structure from the older one: +If you scaffolded a NativeScript-Vue app using the 1.3.1 version of the Vue-CLI template, it's time to upgrade to the newest 2.0 version. This guide will help you do that. + +The new template has a different folder structure from the older one: ![New folder structure](/screenshots/old-new-folder-structure.png) -**Step 1** +The upgrade process involves creating a new project from the updated template, copying files from your old app into the new one, and then rearranging and adding some files. + +## Step 1: Create new app Start by creating a new app using the Vue-CLI template. -> **TIP:** Make sure you use the same preinstallation commands in this new project that you used when creating the older version; for example, if you installed Vuex in the CLI the first time, do it again now. +> **TIP:** In your new project, use the same preinstallation commands that you used when creating the older version. For example, if you installed Vuex in the CLI the first time, do it again now. ```shell $ npm install -g @vue/cli @vue/cli-init @@ -26,38 +30,41 @@ $ # or $ tns run ios --bundle ``` -The upgrade process involves copying files from your old app into the new project and then rearranging and adding some files. +## Step 2: Replace the app resources + +First, copy your old app's `App_Resources` folder from `./template/app/`. Next, paste it into the new app's `app` folder. Make sure that you're replacing the new `App_Resources` folder. -**Step 2: Replace App Resources** +## Step 3: Merge the `src` and `app` folders -Copy your old app's `App_Resources` folder from `./template/app/` and paste it into the new app's `app` folder, replacing its `App_Resources` folder. +Copy all the folders in `src` from your old app and paste them into the `app` folder in the new app. -**Step 3: Merge `src` and `app` folders** +If you have custom fonts, move the `src/assets/fonts` folder to `app/fonts` to let NativeScript load them automatically. -Copy all the folders in `src` from your old app and paste them into the `app` folder in the new app. If you have custom fonts, move the `src/assets/fonts` folder to `app/fonts` in order to let NativeScript to load them automatically. +## Step 4: Edit `main.js` -**Step 4: Edit `main.js`** +NativeScript 4.0 introduced two major improvements: -NativeScript 4.0 introduced a new Frame element, and introduced a way to change the root element of our applications, allowing for sharing common view elements across pages (navigations). +* a new `` element +* a way to change the root element of our applications that lets you share common view elements across pages (navigations). -Prior to 4.0 the root element was a Frame, which was implicitly created by NativeScript when our application started. +Prior to NativeScript 4.0, the root element was a `` which was implicitly created by NativeScript when the application started. -With these changes, we are no longer able to automatically create a Frame and Page elements, so in 2.0.0 you are required to explicitly add these elements to your template. +With the latest changes, `` and `` elements are longer automatically created. So, in NativeScript-Vue 2.0.0, you need to explicitly add these elements to your template. -To keep the previous behavior of having a single root Frame, you can change your root Vue instance to have a `` and a `` element. +To keep the previous behavior of having a single root ``, you can change your root Vue instance to have a `` and a `` element. **Example** -```js -// in prior versions +```JavaScript +// in older versions // this automatically created a Page new Vue({ template: `