Package Vue projects as an app with Cordova

Source: Internet
Author: User

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

  1. var app = {
  2. // Application Constructor
  3. initialize: function() {
  4. this.bindEvents();
  5. },
  6. // Bind Event Listeners
  7. //
  8. // Bind any events that are required on startup. Common events are:
  9. // ‘load‘, ‘deviceready‘, ‘offline‘, and ‘online‘.
  10. bindEvents: function() {
  11. document.addEventListener(‘deviceready‘, this.onDeviceReady, false);
  12. },
  13. // deviceready Event Handler
  14. //
  15. // The scope of ‘this‘ is the event. In order to call the ‘receivedEvent‘
  16. // function, we must explicitly call ‘app.receivedEvent(...);‘
  17. onDeviceReady: function() {
  18. app.receivedEvent(‘deviceready‘);
  19. },
  20. // Update DOM on a Received Event
  21. receivedEvent: function(id) {
  22. var parentElement = document.getElementById(id);
  23. var listeningElement = parentElement.querySelector(‘.listening‘);
  24. var receivedElement = parentElement.querySelector(‘.received‘);
  25. listeningElement.setAttribute(‘style‘, ‘display:none;‘);
  26. receivedElement.setAttribute(‘style‘, ‘display:block;‘);
  27. console.log(‘Received Event: ‘ + id);
  28. }
  29. };
  30. 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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.