Package Vue projects as an app with Cordova

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

2. var app = {
4. // Application Constructor
6. initialize: function() {
8. this.bindEvents();
10. },
12. // Bind Event Listeners
14. //
16. // Bind any events that are required on startup. Common events are:
18. // ‘load‘, ‘deviceready‘, ‘offline‘, and ‘online‘.
20. bindEvents: function() {
22. document.addEventListener(‘deviceready‘, this.onDeviceReady, false);
24. },
26. // deviceready Event Handler
28. //
30. // The scope of ‘this‘ is the event. In order to call the ‘receivedEvent‘
32. // function, we must explicitly call ‘app.receivedEvent(...);‘
34. onDeviceReady: function() {
36. app.receivedEvent(‘deviceready‘);
38. },
40. // Update DOM on a Received Event
42. receivedEvent: function(id) {
44. var parentElement = document.getElementById(id);
46. var listeningElement = parentElement.querySelector(‘.listening‘);
48. var receivedElement = parentElement.querySelector(‘.received‘);
50. listeningElement.setAttribute(‘style‘, ‘display:none;‘);
52. receivedElement.setAttribute(‘style‘, ‘display:block;‘);
54. console.log(‘Received Event: ‘ + id);
56. }
58. };
60. app.initialize();

1) Copy content to Vue/src/vuex/main.js

2) Start app when Ondeviceready

1. onDeviceReady: function () {
2. //app.receivedEvent(‘deviceready‘);
3. appRouter.start(App, ‘app‘)
4. window.navigator.splashscreen.hide()
5. }

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