【NativeScript 6】NativeScript + Vue.js = iOS + Android?

Jul 23, 2019 · 1 min read · nativescript vue ios android ·

NativeScript是一套跨平台的framework，聽名字就知道，它是用來寫Native程式的，說到跨平台比較紅的還有使用dart語言的Flutter、使用javascript語言的React Native，之所以會選擇它也是因為TypeScript越來越紅了，很想學一學，如果與Angular或Vue.js結合，就可以開發手機平臺的程式，聽起來是不是很不錯啊？如果要看看它與其它跨平台開發的工具比較，可以看看這一篇文章。那為什麼會選擇Vue.js v2.x呢？因為它下一版以TypeScript改寫，加上它有中文文件，所以對於英文不好的我是最佳的選擇，接下來我們就開始吧。

環境安裝

基本環境安裝

其實跟安裝Flutter環境的方向差不多，大家可以參考一下，不過它其實要裝的東西滿多的。

安裝Nodejs

說到安裝NativeScript官方有詳細的說明，因為它是由Nodejs寫的，所以要先安裝它。

安裝Python

安裝python的話使用homebrew就可以安裝了，簡單又方便。

安裝Xcode

安裝Xcode - iOS IDE，這個從AppStore下載完成就裝好了。

安裝Android Studio

安裝Android Studio - Android IDE，這個也還好，在macOS安裝很方便，都會帶著使用者一步步的去完成。

安裝OpenJDK

這裡我們利用Homebrew來安裝OpenJDK。

brew tap AdoptOpenJDK/openjdk       # 先把OpenJDK的Tap加入
brew search openjdk                 # 看看有什麼版本的OpenJDK可以安裝
brew cask install adoptopenjdk12    # 這裡安裝的是v12的版本
java --version                      # 試試看安裝好了嗎？

安裝Cocoapods

因為是跨平台開發，所以也要安裝Cocoapods來管理套件

sudo gem install cocoapods
pod setup

安裝Python相容性的framework

安裝Python2和Python3的相容framework - six

pip3 install six

設定ANDROID_HOME環境變數

在~/.bash_profile中加入『ANDROID_HOME』變數

sudo open .bash_profile
source .bash_profile
echo .bash_profile

export ANDROID_HOME=~/Library/Android/sdk
export PATH=${PATH}:${ANDROID_HOME}/tools
export PATH=${PATH}:${ANDROID_HOME}/platform-tools

開始執行

安裝NativeScript

裝了那麼多東西，終於來到重點了

npm i -g nativescript
tnc --version
tns doctor

安裝Vue CLI

npm install -g @vue/cli @vue/cli-init

建立新專案

建立新專案

vue init nativescript-vue/vue-cli-template <project-name>
cd <project-name>
npm install

執行專案 - iOS

執行專案在iPhone模擬器上，因為iPhone模擬器在Xcode都有建立好了，所以直接run就可以了。如果有插實機的話，也可以直接在實機上Run，模擬器的也會一起run。

tns run ios --bundle

執行專案 - Android

執行專案在Android模擬器上，因為Android模擬器要自己建立好，所以要先打開模擬器才可以執行。同上，有插實機的話也會一起Run。

tns run android --bundle

搜尋設備

tns devices

可以利用tns devices指令來進行相關的Search。

tns devices             # 搜尋全部
tns devices ios         # 搜尋iOS
tns devices android     # 搜尋Android

執行某個設備

如果想要只執行某個設備的話，可以利用tns run –device 指令來進行相關的Search。

tns run --device <Device ID>

VSCode

當然使用萬能的VSCode也可以run喲，只要安裝NativeScript Extension就可以了。

程式結構

最後來看看程式結構是長得怎麼樣吧。

後記

裝了那麼多的東東終於可以動了，比安裝Flutter的開發環境還麻煩，難怪用的人比較少。中間碰到的坑就是Android Studio用的是自帶的OpenJDK，系統上是沒有的，所以我就自己裝了一個就可以動了，果然是自己對Android開發環境的不熟悉，看來還是要好好多多學習才是，希望有一天能成為月薪百萬的工程師。