Vueでネイティブアプリを作り倒す

A707ad94dbfab671ffde25db523f7368?s=47 chan_kaku
January 12, 2019

 Vueでネイティブアプリを作り倒す

Vueを使ってクロスプラットフォームアプリケーションを作れる手段はいくつかありますが、今回はIonicとWeexとVue Nativeで作っていく話です

A707ad94dbfab671ffde25db523f7368?s=128

chan_kaku

January 12, 2019
Tweet

Transcript

  1. 16.
  2. 19.

    Capacitorを使う • @capacitor/core と @capacitor/cliをinstall $ npm install @capacitor/core @capacitor/cli

    • イニシャライズしてビルド $ npx cap init sampleApp com.sample.ionic.app • プラットフォームとしてiOSを追加 $ mv dist www $ npx cap add ios
  3. 21.
  4. 22.
  5. 27.

    下準備 • weex-toolkitのinstall $ npm install weex-toolkit -g • スタータープロジェクトの作成

    $ weex create weex-sample-app • 依存モジュールのinstallとstart $ cd weex-sample-app $ npm i $ npm start
  6. 31.
  7. 36.
  8. 37.
  9. 38.

    index.vueを変更 <template> <div> {{text}} <input v-model="text" /> </div> </template> <script>

    export default { data () { return { text: "default text" } } } </script>
  10. 40.
  11. 47.

    事前準備 System Requirements • node が 6.0以上 • npm が

    4.0以上 • React Native CLI がグローバルでインストールされていること
  12. 48.

    事前準備 • Vue Native CLIでプロジェクトの作成&確認 • $ npm install -g

    vue-native-cli $ npm install -g create-react-native-app $ vue-native init sampleApp $ cd sampleApp $ npm run ios
  13. 50.
  14. 56.
  15. 61.
  16. 62.