前回は準備で終わったIonic Frameworkの環境構築。
CLIのインストール
ドキュメントの手順にしたがってインストールしてみる。
~ % npm install -g @ionic/cli /Users/shigeo-t/.nodebrew/node/v14.16.1/bin/ionic -> /Users/shigeo-t/.nodebrew/node/v14.16.1/lib/node_modules/@ionic/cli/bin/ionic + @ionic/cli@6.13.1 added 212 packages from 156 contributors in 17.8s ~ %
アプリケーションの起動
ドキュメントの手順にしたがってアプリケーションの起動をやってみる。
~ % ionic start myapp tabs Pick a framework! 😁 Please select the JavaScript framework to use for your new app. To bypass this prompt next time, supply a value for the --type option. ? Framework: (Use arrow keys) ❯ Angular | https://angular.io React | https://reactjs.org Vue | https://vuejs.org
今回はVueを選ぶ。矢印キー[↓]でVueを選べた。IonicはAngularでスタートしているが、ウチの都合はVueやReactなので今回はVue。
~ % ionic start myapp tabs Pick a framework! 😁 Please select the JavaScript framework to use for your new app. To bypass this prompt next time, supply a value for the --type option. ? Framework: Angular | https://angular.io React | https://reactjs.org ❯ Vue | https://vuejs.org
[Enter]を押す。一度Angularにして途中で止めたのでRewriteを聞かれている。
~ % ionic start myapp tabs Pick a framework! 😁 Please select the JavaScript framework to use for your new app. To bypass this prompt next time, supply a value for the --type option. ? Framework: Vue ? ./myapp exists. Overwrite? Yes ✔ Preparing directory ./myapp in 14.47ms ✔ Downloading and extracting tabs starter in 217.83ms > ionic integrations enable capacitor --quiet -- myapp io.ionic.starter > npm i --save -E @capacitor/core npm notice created a lockfile as package-lock.json. You should commit this file. + @capacitor/core@2.4.7 added 2 packages from 2 contributors and audited 2 packages in 1.832s found 0 vulnerabilities > npm i -D -E @capacitor/cli + @capacitor/cli@2.4.7 added 55 packages from 91 contributors and audited 57 packages in 4.677s 1 package is looking for funding run `npm fund` for details found 0 vulnerabilities > capacitor init myapp io.ionic.starter --web-dir dist --npm-client npm 🎉 Your Capacitor project is ready to go! 🎉 Add platforms using "npx cap add": npx cap add android npx cap add ios npx cap add electron Follow the Developer Workflow guide to get building: https://capacitorjs.com/docs/basics/workflow [OK] Integration capacitor added! Installing dependencies may take several minutes. ────────────────────────────────────────────────────────────────────────────── Ionic Advisory, tailored solutions and expert services by Ionic Go to market faster 🏆 Real-time troubleshooting and guidance 💁 Custom training, best practices, code and architecture reviews 🔎 Customized strategies for every phase of the development lifecycle 🔮 👉 https://ion.link/advisory 👈 ────────────────────────────────────────────────────────────────────────────── > npm i npm WARN deprecated html-webpack-plugin@3.2.0: 3.x is no longer supported npm WARN deprecated eslint-loader@2.2.1: This loader has been deprecated. Please use eslint-webpack-plugin npm WARN deprecated @hapi/joi@15.1.1: Switch to 'npm install joi' npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142 npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies. npm WARN deprecated @hapi/address@2.1.4: Moved to 'npm install @sideway/address' npm WARN deprecated @hapi/bourne@1.3.2: This version has been deprecated and is no longer supported or maintained npm WARN deprecated @hapi/hoek@8.5.1: This version has been deprecated and is no longer supported or maintained npm WARN deprecated @hapi/topo@3.1.6: This version has been deprecated and is no longer supported or maintained npm WARN deprecated debug@3.2.6: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (https://github.com/visionmedia/debug/issues/797) npm WARN deprecated request@2.88.0: request has been deprecated, see https://github.com/request/request/issues/3142 npm WARN deprecated har-validator@5.1.5: this library is no longer supported npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2. npm WARN deprecated core-js@2.6.12: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3. npm WARN deprecated request-promise-native@1.0.9: request-promise-native has been deprecated because it extends the now deprecated request package, see https://github.com/request/request/issues/3142 npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated npm WARN deprecated mkdirp@0.5.1: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.) npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated npm WARN deprecated left-pad@1.3.0: use String.prototype.padStart() > fsevents@1.2.13 install /Users/shigeo-t/myapp/node_modules/jest-haste-map/node_modules/fsevents > node install.js SOLINK_MODULE(target) Release/.node CXX(target) Release/obj.target/fse/fsevents.o SOLINK_MODULE(target) Release/fse.node > deasync@0.1.21 install /Users/shigeo-t/myapp/node_modules/deasync > node ./build.js `darwin-x64-node-14` exists; testing Binary is fine; exiting > fsevents@1.2.13 install /Users/shigeo-t/myapp/node_modules/watchpack-chokidar2/node_modules/fsevents > node install.js SOLINK_MODULE(target) Release/.node CXX(target) Release/obj.target/fse/fsevents.o SOLINK_MODULE(target) Release/fse.node > fsevents@1.2.13 install /Users/shigeo-t/myapp/node_modules/webpack-dev-server/node_modules/fsevents > node install.js SOLINK_MODULE(target) Release/.node CXX(target) Release/obj.target/fse/fsevents.o SOLINK_MODULE(target) Release/fse.node > yorkie@2.0.0 install /Users/shigeo-t/myapp/node_modules/yorkie > node bin/install.js setting up Git hooks can't find .git directory, skipping Git hooks installation > core-js@2.6.12 postinstall /Users/shigeo-t/myapp/node_modules/babel-runtime/node_modules/core-js > node -e "try{require('./postinstall')}catch(e){}" Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library! The project needs your help! Please consider supporting of core-js on Open Collective or Patreon: > https://opencollective.com/core-js > https://www.patreon.com/zloirock Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -) > core-js@3.10.1 postinstall /Users/shigeo-t/myapp/node_modules/core-js > node -e "try{require('./postinstall')}catch(e){}" > ejs@2.7.4 postinstall /Users/shigeo-t/myapp/node_modules/ejs > node ./postinstall.js Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/) > cypress@3.8.3 postinstall /Users/shigeo-t/myapp/node_modules/cypress > node index.js --exec install Installing Cypress (version: 3.8.3) ✔ Downloaded Cypress ✔ Unzipped Cypress ✔ Finished Installation /Users/shigeo-t/Library/Caches/Cypress/3.8.3 You can now open Cypress by running: node_modules/.bin/cypress open https://on.cypress.io/installing-cypress npm WARN vue-jest@3.0.7 requires a peer of vue@^2.x but none is installed. You must install peer dependencies yourself. npm WARN vue-jest@3.0.7 requires a peer of vue-template-compiler@^2.x but none is installed. You must install peer dependencies yourself. npm WARN postcss-modules@4.0.0 requires a peer of postcss@^8.0.0 but none is installed. You must install peer dependencies yourself. npm WARN postcss-modules-values@4.0.0 requires a peer of postcss@^8.1.0 but none is installed. You must install peer dependencies yourself. npm WARN postcss-modules-local-by-default@4.0.0 requires a peer of postcss@^8.1.0 but none is installed. You must install peer dependencies yourself. npm WARN postcss-modules-extract-imports@3.0.0 requires a peer of postcss@^8.1.0 but none is installed. You must install peer dependencies yourself. npm WARN postcss-modules-scope@3.0.0 requires a peer of postcss@^8.1.0 but none is installed. You must install peer dependencies yourself. npm WARN icss-utils@5.1.0 requires a peer of postcss@^8.1.0 but none is installed. You must install peer dependencies yourself. added 1752 packages from 968 contributors and audited 1809 packages in 126.11s 85 packages are looking for funding run `npm fund` for details found 4 low severity vulnerabilities run `npm audit fix` to fix them, or `npm audit` for details > git init Initialized empty Git repository in /Users/shigeo-t/myapp/.git/ Join the Ionic Community! 💙 Connect with millions of developers on the Ionic Forum and get access to live events, news updates, and more. ? Create free Ionic account? Yes > git add -A > git commit -m "Initial commit" --no-gpg-sign [master (root-commit) d6acf20] Initial commit 31 files changed, 17549 insertions(+) create mode 100644 .browserslistrc create mode 100644 .eslintrc.js create mode 100644 .gitignore create mode 100644 babel.config.js create mode 100644 capacitor.config.json create mode 100644 cypress.json create mode 100644 ionic.config.json create mode 100644 jest.config.js create mode 100644 package-lock.json create mode 100644 package.json create mode 100644 public/assets/icon/favicon.png create mode 100644 public/assets/icon/icon.png create mode 100644 public/assets/shapes.svg create mode 100644 public/index.html create mode 100644 src/App.vue create mode 100644 src/components/ExploreContainer.vue create mode 100644 src/main.ts create mode 100644 src/router/index.ts create mode 100644 src/shims-vue.d.ts create mode 100644 src/theme/variables.css create mode 100644 src/views/Tab1.vue create mode 100644 src/views/Tab2.vue create mode 100644 src/views/Tab3.vue create mode 100644 src/views/Tabs.vue create mode 100644 tests/e2e/.eslintrc.js create mode 100644 tests/e2e/plugins/index.js create mode 100644 tests/e2e/specs/test.js create mode 100644 tests/e2e/support/commands.js create mode 100644 tests/e2e/support/index.js create mode 100644 tests/unit/example.spec.ts create mode 100644 tsconfig.json Your Ionic app is ready! Follow these next steps: - Go to your new project: cd ./myapp - Run ionic serve within the app directory to see your app in the browser - Run ionic capacitor add to add a native iOS or Android project using Capacitor - Generate your app icon and splash screens using cordova-res --skip-config --copy - Explore the Ionic docs for components, tutorials, and more: https://ion.link/docs - Building an enterprise app? Ionic has Enterprise Support and Features: https://ion.link/enterprise-edition ~ %
最後、yを答えたらブラウザで下記に飛んだ。
GitHubで入ってみる。
うまくいったようだ。
Packeges & CDN
Ionic + Vueのインストールをやる。
~ % npm install @ionic/vue @ionic/vue-router npm WARN saveError ENOENT: no such file or directory, open '/Users/shigeo/package.json' npm notice created a lockfile as package-lock.json. You should commit this file. npm WARN enoent ENOENT: no such file or directory, open '/Users/shigeo-t/package.json' npm WARN shigeo-t No README data npm WARN shigeo-t No license field. + @ionic/vue-router@5.6.4 + @ionic/vue@5.6.4 added 6 packages from 4 contributors and audited 6 packages in 5.136s found 0 vulnerabilities
~ %
次
次は「次のステップ」だが、長くなったので次回。Vueだけ日本語ドキュメントが無いｗ
