Skip to content

Commit 627f7d9

Browse files
committed
Initial round of proofreading
1 parent 47f4659 commit 627f7d9

File tree

1 file changed

+39
-31
lines changed

1 file changed

+39
-31
lines changed

content/docs/en/getting-started/4-upgrade-guide.md

Lines changed: 39 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,24 @@
11
---
22
title: Upgrade Guide
3-
contributors: [rigor789, jlooper]
3+
contributors: [rigor789, jlooper, ikoevska]
44
outdated: false
55
---
66

77
> Estimated time for the upgrade: **10-20 minutes**.
88
9-
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:
9+
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.
10+
11+
The new template has a different folder structure from the older one:
1012

1113
![New folder structure](/screenshots/old-new-folder-structure.png)
1214

13-
**Step 1**
15+
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.
16+
17+
## Step 1: Create new app
1418

1519
Start by creating a new app using the Vue-CLI template.
1620

17-
> **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.
21+
> **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.
1822
1923
```shell
2024
$ npm install -g @vue/cli @vue/cli-init
@@ -26,38 +30,41 @@ $ # or
2630
$ tns run ios --bundle
2731
```
2832

29-
The upgrade process involves copying files from your old app into the new project and then rearranging and adding some files.
33+
## Step 2: Replace the app resources
34+
35+
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.
3036

31-
**Step 2: Replace App Resources**
37+
## Step 3: Merge the `src` and `app` folders
3238

33-
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.
39+
Copy all the folders in `src` from your old app and paste them into the `app` folder in the new app.
3440

35-
**Step 3: Merge `src` and `app` folders**
41+
If you have custom fonts, move the `src/assets/fonts` folder to `app/fonts` to let NativeScript load them automatically.
3642

37-
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.
43+
## Step 4: Edit `main.js`
3844

39-
**Step 4: Edit `main.js`**
45+
NativeScript 4.0 introduced two major improvements:
4046

41-
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).
47+
* a new `<Frame>` element
48+
* a way to change the root element of our applications that lets you share common view elements across pages (navigations).
4249

43-
Prior to 4.0 the root element was a Frame, which was implicitly created by NativeScript when our application started.
50+
Prior to NativeScript 4.0, the root element was a `<Frame>` which was implicitly created by NativeScript when the application started.
4451

45-
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.
52+
With the latest changes, `<Frame>` and `<Page>` elements are longer automatically created. So, in NativeScript-Vue 2.0.0, you need to explicitly add these elements to your template.
4653

47-
To keep the previous behavior of having a single root Frame, you can change your root Vue instance to have a `<Frame>` and a `<Page>` element.
54+
To keep the previous behavior of having a single root `<Frame>`, you can change your root Vue instance to have a `<Frame>` and a `<Page>` element.
4855

4956
**Example**
5057

51-
```js
52-
// in prior versions
58+
```JavaScript
59+
// in older versions
5360
// this automatically created a Page
5461
new Vue({
5562
template: `<Label text="Hello world"/>`
5663
}).$start()
5764
```
5865

59-
```js
60-
// in 2.0.0
66+
```JavaScript
67+
// in NativeScript-Vue 2.0.0
6168
// the <Frame> and <Page> must exist in your template
6269
new Vue({
6370
template: `
@@ -70,7 +77,7 @@ new Vue({
7077
}).$start()
7178
```
7279

73-
This allows us to use a shared SideDrawer across different pages for example:
80+
This lets you use a shared element across different pages. For example, a `<SideDrawer>`:
7481

7582
```js
7683
new Vue({
@@ -95,11 +102,13 @@ new Vue({
95102
}).$start();
96103
```
97104

98-
**Step 5: Edit paths**
105+
## Step 5: Edit paths
99106

100-
Since the folder structure has changed, you need to edit the paths in your new app to point to your styles, fonts, and images.
107+
Because the folder structure has changed, you need to edit the paths in your new app to point to your styles, fonts, and images.
101108

102-
In your components, if you have images from your old app referenced like this:
109+
**Example**
110+
111+
If you have images from your old app referenced like this:
103112

104113
```HTML
105114
<Image v-if="surprise" src="~/images/NativeScript-Vue.png"/>
@@ -111,9 +120,9 @@ Change the path:
111120
<Image v-if="surprise" src="~/assets/images/NativeScript-Vue.png"/>
112121
```
113122

114-
**Step 6: Fix Manual Routing Props (if necessary)**
123+
## (If needed) Step 6: Fix manual routing props
115124

116-
If your app uses manual routing, please note that the syntax for passing props has changed.
125+
If your app uses manual routing, the syntax for passing props has changed.
117126

118127
Old syntax:
119128

@@ -147,14 +156,13 @@ this.$navigateTo(NewPage, {
147156
});
148157
```
149158

150-
151-
**Step 7: Align `package.json`**
159+
## Step 7: Align `package.json`
152160

153161
Copy the relevant values from your old app's root `package.json` file into the new app's root `package.json` file. This will most likely entail copying the `Dependencies:` block, but you might also need to realign the new app's app version and description at the top of `package.json`.
154162

155-
**Step 8: Clean and run**
163+
## Step 8: Clean and run
156164

157-
At this point, it's a good idea to clean the new app's folders (if you have run it prior) and reinstall any dependencies.
165+
At this point, it's a good idea to clean the new app's folders and reinstall any dependencies.
158166

159167
```shell
160168
$ cd <project-name>
@@ -165,9 +173,9 @@ $ # or
165173
$ tns run ios --bundle
166174
```
167175

168-
**Step 8 (Optional): Try HMR**
176+
## (Optional) Step 8: Try HMR
169177

170-
Just recently nativescript received support for HMR (Hot Module Replacement). The latest version of NativeScript-Vue supports it out of the box, however you will need to install the latest (and greatest) version of the NativeScript CLI.
178+
Just recently NativeScript received support for HMR (Hot Module Replacement). The latest version of NativeScript-Vue supports it out-of-the-box but you will need to install the latest (and greatest) version of the NativeScript CLI.
171179

172180
```shell
173181
$ npm install -g nativescript@next
@@ -176,4 +184,4 @@ $ rm -rf platforms
176184
$ tns run android --hmr
177185
$ # or
178186
$ tns run ios --hmr
179-
```
187+
```

0 commit comments

Comments
 (0)