0%

【NativeScript-vue】NativeScript-vue(安装篇)

前言:

今天凌晨,在浏览Github的时候发现了这个nativescript-vue,发现他可以用Vue的语法,来开发Android应用程序以及iOS应用程序。很是激动,于是有了这篇文章。

准备工作(windows)

注意:中间如果提示xxx不存在等信息,应该是环境变量还没有生效,请打开新的cmd窗口(管理员身份)

1.安装Chocolatey以简化要求的安装和配置。(下面的程序通过Chocolatey命令行的方式安装)需要以管理员身份在命令提示符下输入(那个黑框程序cmd.exe)

@powershell -NoProfile -ExecutionPolicy unrestricted -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin

2.安装Google Chrome(调试NativeScript应用程序所需)

choco install googlechrome -y

3.安装nodejs

choco install nodejs-lts -y

4.安装jdk8

choco install jdk8 -y

5.安装Android SDK

choco install android-sdk -y

6.安装Android SDK Platform 25,Android SDK Build-Tools 27.0.3或更高版本,Android支持存储库,Google Repository以及您可能需要的任何其他SDK的所有软件包。

"%ANDROID_HOME%\tools\bin\sdkmanager" "platform-tools" "platforms;android-25" "build-tools;27.0.3" "extras;android;m2repository" "extras;google;m2repository"

7.安装Android虚拟设备(AVD)

@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://nativescript.org/setup/win-avd'))"

8.安装NativeScript CLI

npm i -g nativescript

9.检查配置是否正确

tns doctor

已上内容参考https://docs.nativescript.org/start/ns-setup-win

快速开始

npm install -g @vue/cli @vue/cli-init    //在系统上安装Vue CLI及其init加载项。
vue init nativescript-vue/vue-cli-template <project-name>   
cd <project-name>
npm install

//开始运行
npm run watch:android  
//or
npm run watch:ios   //仅可在macos上

然后就是等待,会安装一些东西,我自己在尝试运行的时候在Android emulator卡住了,然后报错。 我直接用手头现有的xiao mi 5sAndroid手机,在开启了调试模式后,连接电脑,重新执行

npm run watch:android 

然后手机上授权安装一个app,之后程序运行的结果会在手机上显示出来。 第一个界面如上图所示。