cordova+vue開発Android&IOS

2092 ワード
この文章は個人のノートとしてのみ使用します
cordova公式サイト
vue公式サイト
cordova公式ドキュメント
vue公式ドキュメント
  • 環境構築については紹介しませんが、公式ドキュメントによるとすぐに入手できます.ここでは主に出会った穴、個人構築習慣
    • を紹介します.
  • 直接プロジェクト構築
    //       ( hello)
mkdir hello
//     
cd hello
//  vue  ( vue)
vue init webpack vue
//    
npm install
//      
cd ..
//  cordova  (     cordova，   com.example.hello)
cordova create cordova com.example.hello HelloWorld
//  Android&IOS    
cordova platform add ios
cordova platform add android
    • を開始
  • プロジェクト変更vueの作成に必要な場所
    //  vue/config/index.js
dev:{
  assetsPublicPath: '',
}
build: {
  index: path.resolve(__dirname, '../../cordova/www/index.html'),
  assetsRoot: path.resolve(__dirname, '../../cordova/www'),
  assetsPublicPath: ''
}
//  android             
//   babel-polyfill
npm install --save babel-polyfill
//  vue/src/main.js
import "babel-polyfill";
//      ，  vue/index.html



//        ，  vue/index.html

//  cordova.js，      ，      ， #appp    

//  css    ，  vue/package.json
"css-loader": "^0.18.0",
  • vueプロジェクトを し、vueプロジェクト でnpm run buildを するとcordovaプロジェクトにページを できます
  • cordovaプロジェクトを2つの に けて
  • Android
  • に2 を 
    cordova/platforms/android/app/src/main/AndroidManifest.xml
cordova/platforms/android/CordovaLib/src/main/AndroidManifest.xml
  • IOSはxcodeで き、 グループを すれば
    • になる.
  • これで が った はすべて して、プロジェクトは に します.

    • Phonegapイベントのresumeイベント
    HTML 5 canvasのsaveとrestoreが無効になることを発見しました