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 6 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ì?
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, ori
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, orR
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>
Phần còn lại chỉ cần bạn có chút kiến thức về VueJS là có thể build một app cho mình chẳng khác gì là viết một web app cả.
Nếu bạn chưa biết VueJS, HỌC! đừng lo, nó đơn giản và dễ học hơn React nhiều. Bạn có thể ghé qua bài viết này của mình để đọc qua về VueJS.
All rights reserved