|
1 | | -# Vue Native |
| 1 | +# Vue Native CLI |
2 | 2 |
|
3 | 3 | ## Build Native Mobile apps using Vue |
4 | 4 |
|
5 | 5 | > Vue Native is a wrapper around the APIs of React Native. So, with Vue Native, you can do everything what you can do with React Native. |
6 | 6 |
|
7 | | -A basic cli that generates a simple 1 page application with [create-react-native-app](https://github.com/react-community/create-react-native-app), |
8 | | -[vue-native-core](https://github.com/GeekyAnts/vue-native-core) |
| 7 | +Vue Native CLI is a basic command line interface that generates a simple 1 page application with [Expo](https://docs.expo.io/versions/latest/workflow/expo-cli/), or optionally with [React Native CLI](https://github.com/react-native-community/cli) |
9 | 8 |
|
10 | 9 | ## Installation Prerequisites |
11 | | -You should have create-react-native-app or react-native-cli installed as a global dependency |
| 10 | + |
| 11 | +Since Vue Native is a wrapper around React Native, to use the CLI, you must have either `expo-cli` or `react-native-cli` installed globally. |
| 12 | + |
| 13 | +To install Expo globally, use the following command: |
12 | 14 | ``` |
13 | | -For React Native ClI => npm install react-native-cli -g |
| 15 | +$ npm install -g expo-cli |
14 | 16 | ``` |
| 17 | + |
| 18 | +If you wish to use React Native CLI instead, use the following command to install it globally: |
15 | 19 | ``` |
16 | | -For CRNA => npm install create-react-native-app -g |
| 20 | +$ npm install -g react-native-cli |
17 | 21 | ``` |
18 | 22 |
|
19 | | -## Installation: |
| 23 | +You will also need [Android Studio](https://developer.android.com/studio) / [Xcode](https://developer.apple.com/xcode/) for development. |
| 24 | + |
| 25 | +## Installation |
| 26 | + |
| 27 | +Once the prerequisites have been installed, you are all set to install `vue-native-cli`. |
20 | 28 |
|
21 | 29 | ``` |
22 | | -$ npm install -g expo-cli |
23 | 30 | $ npm install -g vue-native-cli |
24 | 31 | ``` |
25 | 32 |
|
26 | | -Generate [CRNA + Vue App](https://github.com/GeekyAnts/vue-native-core) App |
| 33 | +## Usage |
| 34 | + |
| 35 | +### For Expo users |
| 36 | + |
| 37 | +Generate an app with the following command: |
27 | 38 |
|
28 | 39 | ``` |
29 | 40 | $ vue-native init <projectName> |
| 41 | +``` |
| 42 | + |
| 43 | +This will create a project folder with the specified name in the current working directory. |
| 44 | + |
| 45 | +To start the development server, execute the following commands: |
30 | 46 |
|
31 | 47 | ``` |
32 | | -You can also have default React Native Project using command-line options: |
| 48 | +$ cd <projectName> |
| 49 | +$ npm start |
| 50 | +``` |
| 51 | + |
| 52 | +Alternatively, you may use `expo start` to start the development server. |
| 53 | +`expo start --ios` and `expo start --android` can be used to directly start the application on the respective platform emulators. |
| 54 | + |
| 55 | +### For React Native CLI users |
| 56 | + |
| 57 | +Generate an app with the following command: |
33 | 58 |
|
34 | 59 | ``` |
35 | | -vue-native init <projectName> --no-crna |
| 60 | +$ vue-native init <projectName> --no-expo |
36 | 61 | ``` |
37 | 62 |
|
38 | | -## [Demo App](https://github.com/GeekyAnts/KitchenSink-Vue-Native) |
| 63 | +Once the setup is complete, `cd` into the project directory and start the developement server as follows: |
| 64 | + |
| 65 | +``` |
| 66 | +$ cd <projectName> |
| 67 | +$ npm start |
| 68 | +``` |
| 69 | + |
| 70 | +You may also use `react-native` commands directly. For example to run the application on an iPhone X simulator (assuming Xcode is installed), run |
| 71 | + |
| 72 | +``` |
| 73 | +$ react-native run-ios --simulator "iPhone X" |
| 74 | +``` |
39 | 75 |
|
40 | | -## Todo: |
| 76 | +## Useful links |
41 | 77 |
|
42 | | -* Improve Debugging, tracing, error reporting. |
| 78 | +- [The official Vue Native documentation](https://vue-native.io/docs/installation.html) |
| 79 | +- [The Vue Native KitchenSink app](https://github.com/GeekyAnts/KitchenSink-Vue-Native) |
0 commit comments