Preparation: Before you need to configure the VUE-CLI foot architecture, install the Cordova environment. The Vue.js project is now packaged and packaged in an Android environment.
1. Add Cordova Project
$ Cordova Create MyApp1 org.apache.cordova.myApp myApp2
which
- Myapp1:cordova Directory Name
- ORG.APACHE.CORDOVA.MYAPP: Package Name
- MYAPP2: Project name (view in <name> in Config + +)
2. Add Cordova configuration in Vue
myapp1/www/index.html----->vue/index.html
- Copy all <meta> in myapp1/www/index.html to vue/index.html
- Copy myapp1/www/index.html <script> about cordova.js to vue/index.html
Myapp1/www/js/index.js----->vue/vuex/main.js
var app = {
// Application Constructor
initialize: function() {
this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// ‘load‘, ‘deviceready‘, ‘offline‘, and ‘online‘.
bindEvents: function() {
document.addEventListener(‘deviceready‘, this.onDeviceReady, false);
},
// deviceready Event Handler
//
// The scope of ‘this‘ is the event. In order to call the ‘receivedEvent‘
// function, we must explicitly call ‘app.receivedEvent(...);‘
onDeviceReady: function() {
app.receivedEvent(‘deviceready‘);
},
// Update DOM on a Received Event
receivedEvent: function(id) {
var parentElement = document.getElementById(id);
var listeningElement = parentElement.querySelector(‘.listening‘);
var receivedElement = parentElement.querySelector(‘.received‘);
listeningElement.setAttribute(‘style‘, ‘display:none;‘);
receivedElement.setAttribute(‘style‘, ‘display:block;‘);
console.log(‘Received Event: ‘ + id);
}
};
app.initialize();
1) Copy content to Vue/src/vuex/main.js
2) Start app when Ondeviceready
onDeviceReady: function () {
//app.receivedEvent(‘deviceready‘);
appRouter.start(App, ‘app‘)
window.navigator.splashscreen.hide()
}
3. Create an Android project
Enter the Vue project in the terminal and execute the following command:
Cordova Platform Add Android
4. Add Cordova Plugin
Enter the Vue project in the terminal and execute the following command:
Cordova Plugin add xxxx
5. Building Vue Project
Enter the Vue project in the terminal and execute the following command:
NPM Run Build
6. File transfer
Copy the files under the Dist folder to the Cordova/platforms/androd/assets/www directory (index.html instead of the original)
7. Build Cordova Project
From the terminal into the Myapp1/platforms/android/cordova directory, execute the following command:
Cordova Build Android//Build apk (here because the installed Cordova is the latest version 6.5.0, the default will be 6.0 Android environment, which need to install JDK1.8 and above version)
Configure the JDK environment ( only the Mac OS is logged, the win system should be self-repairing ):
CD ~ Enter to ~ Directory
Touch. Bash_profile
Vi. bash_profile editing. bash_profile files using the VI Editor
Then input I, the VI editor inside the meaning of I is to start editing.
The contents of the VI editor are as follows:
Java_home=/library/java/javavirtualmachines/jdk1.7.0_79.jdk/contents/home
classpaht=.: $JAVA _home/lib/dt.jar: $JAVA _home/lib/tools.jar
Path= $JAVA _home/bin: $PATH:
Export Java_home
Export CLASSPATH
Export PATH
Then exit the VI editor using the following command: (Personal habits : wq! Enter )
1. Enter ESE
2. Enter a colon: Wq
3. Save exit
If the above modifications are correct, then let the configured environment variables take effect, using the following command:
source. bash_profile
After that, check that the current Java version is correctly entering the following command:
Java-version
If this is the expected 1.8, then congratulations, you can do this time: Cordova build Android
Cordova Run Android//build apk and install on connected devices (on a personal request)
Package Vue projects as an app with Cordova