https://github.com/W4G1/ionic-vue-starter
:blue_book: A basic Vue (Vuex + Router) template with Ionic & Capacitor
https://github.com/W4G1/ionic-vue-starter
capacitor ionic ionic-framework ionic4 vue vue-cli vue-router vuex
Last synced: about 2 months ago
JSON representation
:blue_book: A basic Vue (Vuex + Router) template with Ionic & Capacitor
- Host: GitHub
- URL: https://github.com/W4G1/ionic-vue-starter
- Owner: W4G1
- Created: 2018-12-11T09:21:13.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2018-12-12T09:58:37.000Z (about 7 years ago)
- Last Synced: 2024-07-12T10:37:16.173Z (over 1 year ago)
- Topics: capacitor, ionic, ionic-framework, ionic4, vue, vue-cli, vue-router, vuex
- Language: Vue
- Homepage:
- Size: 128 KB
- Stars: 24
- Watchers: 1
- Forks: 10
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-ionic-4 - Ionic Vue Starter
README
# :blue_book: Ionic Vue Starter
[](https://nodejs.org/) [](https://nodejs.org/) [](https://beta.ionicframework.com/)
Ionic Vue Starter is a basic Vue CLI 3 (including Vuex & Vue Router) template with Ionic 4 and Capacitor integrated.
Ionic components be used in every Vue component. Take a look here for all the available components: https://beta.ionicframework.com/docs/components/
## :wrench: Getting started
### Requirements
- [Node](https://nodejs.org/) (Of course) v8.12.0 <
- [NPM](https://www.npmjs.com/) v6.4.1 <
- Ionic CLI v4.5.0 <
(`npm install -g ionic`)
- Vue CLI v3.0.5 <
(`npm install -g @vue/cli`)
#### (Optional) for Android Compiling
- [Android Studio](https://developer.android.com/studio/)
#### (Optional) for IOS Compiling
- [Xcode](https://developer.apple.com/xcode/) (OS X only)
### Download
Clone the repository
```sh
git clone https://github.com/W4G1/ionic-vue-starter
```
Or [download](https://github.com/W4G1/ionic-vue-starter/archive/master.zip) directly as .zip
### Installing dependencies
```sh
npm install
```
### Adding a platform for development
{platform} can be 'android', 'electron', 'ios', or 'web'.
```sh
npm run init {platform}
```
### Running the development server
This is the Vue dev server, and features hot reloading.
```sh
npm run serve
```
## :fire: Commands
| Command | Description |
| ------ | ------ |
| `npm run serve` | Starts development server with hot reloading. |
| `npm run build {platform}` | Builds the project and opens the native platform workspace. |
| `npm run init {platform}` | Adds a new platform to the project with its own folder (e.g /android or /ios). |
| `npm run sync {platform}` | Synchronizes the web assets with a specific project folder, or all initialized platforms if {platform} is left empty. |
## :package: Building
### Android
#### Requirements
- [Android Studio](https://developer.android.com/studio/).
#### Guide
Run this command to sync the web assets with the android project folder, and open the project in Android Studio.
```sh
npm run build android
```
Android Studio should now be started. If not, you either didn't install it, or it is installed at a custom location.
If that is the case, you can specify the Android Studio path in `capacitor.config.json`.
For Windows:
```json
{
...
"windowsAndroidStudioPath": "C:\\Program Files\\Android\\Android Studio\\bin\\studio64.exe",
}
```
Or Linux:
```json
{
...
"linuxAndroidStudioPath": "/usr/local/android-studio/bin/studio.sh"
}
```
The project should now be loaded in Android Studio, and is ready for building. If you don't know how to build a project in Android Studio, take a look [here](https://developer.android.com/studio/run/).
### IOS
#### Requirements
- [Xcode](https://developer.apple.com/xcode/) (OS X only).
#### Guide
Coming soon!
## Bugs & Questions
For any bugs or questions, feel free to create an issue [here](https://github.com/W4G1/ionic-vue-starter/issues).