Giới thiệu Vue Native - Làm ứng dụng Native bằng framework Vue

Bài đăng này đã không được cập nhật trong 5 năm

Vue Native vừa được giới thiệu cách đây khoảng hơn 1 tuần, vừa đọc xong cái blog giới thiệu thế là cũng xem qua vọc thử xem có gì hay ho, tiện viết luôn 1 bài Hello World giới thiệu với mọi người.

Vue Native là gì?

What is Vue Native?

Nói ngắn gọn thì nó là một tool có thể tạo ra các ứng dụng native bằng VueJS. Và bên trong nó chính là các API của React Native.

Các điều kiện cần

Node 6.0 trở lên
Npm 4.0 trở lên
React Native CLI được cài đặt global.

Cài đặt React Native CLI

npm install -g react-native-cli
npm install -g create-react-native-app

Vue Native CLI

Tạo một dự án Vue Native bằng Vue Native CLI

npm install -g vue-native-cli

Đừng quên khởi động lại terminal sau khi cài đặt.

vue-native init <project name> # use Create React Native App
vue-native init <project name> --no-crna # Do not use Create React Native App

Tham số --no-crna nghĩa là lựa chọn có sử dụng Create React Native App hay không. Create React Native App cho phép chạy thử ứng dụng trên device thật thông qua Expo.io

Tham khảo:

Ở đây mình sẽ tạo một ứng dụng tên helloVueNative có sử dụng Create React Native App.

Cấu trúc thư mục

helloVueNative
├── .babelrc
├── .gitignore
├── .watchmanconfig
├── App.vue
├── node_modules
├── README.md
├── app.json
├── package.json
├── rn-cli.config.js
├── vueTransformerPlugin.js
└── yarn.lock

Start ứng dụng

cd helloVueNative
npm start

Opps... Lỗi rồi =))

➜  helloVueNative npm start                    

> helloVueNative@0.1.0 start /Users/framgia/sontd/workspace/helloVueNative
> react-native-scripts start

4:18:16 PM: Unable to start server
See https://git.io/v5vcn for more information, either install watchman or run the following snippet:
  sudo sysctl -w kern.maxfiles=5242880
  sudo sysctl -w kern.maxfilesperproc=524288

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! helloVueNative@0.1.0 start: `react-native-scripts start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the helloVueNative@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/framgia/.npm/_logs/2018-06-21T09_18_16_828Z-debug.log

Theo cái message nhận được thì có vẻ như phải cài thêm watchman hoặc chạy 2 lệnh sysctl để cài đặt các tham số của kernel. Fine, mình sẽ cài watchman.

brew install watchman

Vậy là con phố đã lên đèn :yeah:

npm start

> helloVueNative@0.1.0 start /Users/framgia/sontd/workspace/helloVueNative
> react-native-scripts start

4:27:09 PM: Starting packager...
Packager started!
...

Giới thiệu các phương thức

Sau khi chạy npm start, các bạn sẽ nhìn thấy các thông tin sau:

› Press a to open Android device or emulator, or i to open iOS emulator.

› Press s to send the app URL to your phone number or email address

› Press q to display QR code.

› Press r to restart packager, or R to restart packager and clear cache.

› Press d to toggle development mode. (current mode: development)

Cũng đơn giản nhỉ, cài ứng dụng Expo Client lên thiết bị của bạn, đảm bảo điện thoại và máy tính đang connect chung một mạng LAN, sau đó quét mã QR trên terminal là đã có thể lunch app trên device thật rồi.

Sửa lại file App.vue vậy là bạn đã có một ứng dụng Hello World đầu tiên cho mình :v

<template>
  <view class="container">
-    <text class="text-color-primary">My Vue Native App</text>
+    <text class="text-color-primary">Hello Vue Native App</text>
    </view>
</template>