- はじめに
- vue.jsのインストール
- vueのプロジェクト作成
- vue createコマンドでvueプロジェクトを作成する
- デフォルトnpmレジストリへの接続が遅いので、https://registry.npm.taobao.orgを使用するかの質問。
- 現在のフォルダにプロジェクトを作成するかの質問。
- 手動か自動かの質問。
- どの機能を選択するかの質問
- クラス記法を使用するかの質問
- Babelに関する質問
- Vue Routerでヒストリーモードを使用するかの質問
- ESLintの設定の質問
- Lint実行のタイミングの質問
- Babel,ESLintなどの設定をどこに準備するかの質問
- 次回のためにこのプロジェクトの設定を保存するかの質問
- ようやくプロジェクト作成が開始される
- 確認
- Semantic UIの導入
- Androidエミュレータで実行する
- まとめ
はじめに
ハイブリッドアプリの構築で、前回はcordovaの導入を実施しましたので、 今回は、ハイブリッドアプリ内で使用するvue.jsなどの設定を追加していきたいと思います。
vue.jsのインストール
vue.jsをnpmインストール
- npmコマンドで@vue/cliをインストールします。
npm install -g @vue/cli@4.3.1
※バージョン固定しておきたいので、@4.3.1を付与します。 ※最新のバージョンは、(こちら)https://www.npmjs.com/package/@vue/cli?activeTab=versionsで確認できます。
vue.jsのインストール 確認
- vueコマンドでバージョンを参照してインストールを確認します。
>vue --version @vue/cli 4.3.1
vueのプロジェクト作成
vue createコマンドでvueプロジェクトを作成する
cd C:\androidApp\notfunny vue create .
※notfunnyフォルダにcordovaプロジェクトを作成しているので、
notfunnyフォルダに移動して、プロジェクトに.を指定する
デフォルトnpmレジストリへの接続が遅いので、https://registry.npm.taobao.orgを使用するかの質問。
- Yを選択
? Your connection to the default npm registry seems to be slow. Use https://registry.npm.taobao.org for faster installation? (Y/n)
現在のフォルダにプロジェクトを作成するかの質問。
- Yを選択
Vue CLI v4.3.1 ? Generate project in current directory? (Y/n)
手動か自動かの質問。
- vue routerも使いたいので、「Manually select fratures」を選択
- 矢印キーの上下で選択を変更できます。
? Please pick a preset: default (babel, eslint) > Manually select features
どの機能を選択するかの質問
- typescriptも勉強したいので選択
- Vue Routerを使ってシングルページアプリケーションとしたいので選択
- Linter/Formatter選択しておけば、開発が楽になるかも・・・。
- 矢印キーの上下で移動して、スペースキーで選択・選択解除できます。
? Please pick a preset: Manually select features ? Check the features needed for your project: (*) Babel (*) TypeScript ( ) Progressive Web App (PWA) Support (*) Router ( ) Vuex ( ) CSS Pre-processors (*) Linter / Formatter ( ) Unit Testing >( ) E2E Testing
クラス記法を使用するかの質問
- typescriptを選択したので、この質問が表示されます。
- Yを選択
? Use class-style component syntax? (Y/n)
Babelに関する質問
- よく分らんが、Yを選択
Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n)
Vue Routerでヒストリーモードを使用するかの質問
- Yを選択
Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
ESLintの設定の質問
- 標準設定っぽい「ESLint + Standard config」を選択
? Pick a linter / formatter config: (Use arrow keys) > ESLint with error prevention only ESLint + Airbnb config ESLint + Standard config ESLint + Prettier TSLint (deprecated)
Lint実行のタイミングの質問
- 保存時がよいので、「Lint on save」を選択
Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection) >(*) Lint on save ( ) Lint and fix on commit (requ・・・
Babel,ESLintなどの設定をどこに準備するかの質問
- 「package.json」を選択
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys) > In dedicated config files In package.json
次回のためにこのプロジェクトの設定を保存するかの質問
- Yを選択
- Yを入力してEnter入力後、保存名を入力できます。
? Save this as a preset for future projects? (y/N)
ようやくプロジェクト作成が開始される
確認
- npm run serveコマンドを実行してサーバ起動
npm run serve
- ブラウザで確認
- localhost:8080にアクセス
- localhost:8080にアクセス
Semantic UIの導入
Semantic UIのインストール
npmコマンドでsemantic UI vueをインストールします。
バージョン固定したいので、「@0.10.1」を付与します。
npm install semantic-ui-vue@0.10.1
vueインスタンスにsemantic UI vueコンポーネントを使う設定を追加する。
semantic ui vueをインポートする
src/main.ts
import SuiVue from 'semantic-ui-vue' // 追加 Vue.config.productionTip = false Vue.use(SuiVue) // 追加
インポートしたsemantic-ui-vueのtypescriptによる型定義のエラーを解消する
semantic ui vueにより型定義が準備されていればよいのだが、
ないようなので、型定義ファイル(.t.ds)を作成する。
src/@type/semantic-ui-vue.d.ts
declare module 'semantic-ui-vue'
次に型定義ファイルをtypescriptの設定ファイル(tsconfig.json)に追加する。
以下を追加
"typeRoots" : [
"src/@types/*.ts"
]
semantic ui vueのコンポーネントをHTMLに追加してみる
home.vueのtemplate部分に以下を追加
<sui-button primary>click me</sui-button>
semantic ui vueのスタイルをCDNで適用させる
src/public/index.htmlにCSSの指定を追加
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
※以下にsemantic uiのCSSをnpmインストールする方法を記載しています。npmインストールしてCSSを適用した方が良いかも・・・
※CDNでも、npmインストールでも、どちらかでCSSが適用されます。
semantic ui vueのスタイルをnpmインストールして適用させる(2020/05/16追加)
- semantic ui のCSSをnpmインストールします。
npm install semantic-ui-css --save
- semantic uiのCSSのインポート
- main.tsに以下を追加
import 'semantic-ui-css/semantic.min.css';
確認
npm run serveを実行して、ブラウザで確認。
semantic uiのボタンが表示されていますね。
Androidエミュレータで実行する
vueのコンパイル先のディレクトリを変更する
- vue.config.jsの作成する
- プロジェクトフォルダ直下に作成する
- 出力先フォルダの設定を追記する
module.exports = {
publicPath:'./',
outputDir:'www'
}
コンパイルにてcordovaが認識できるwwwディレクトリに出力する
- ビルドの実行
npm run build
エミュレータ実行
cordova emulate android -d
??ちょっと表示が違う、、、
どうやら<router-view/>が初期表示でレンダリングされていない模様。
「Home」をクリックすると・・・
??ロゴが表示されていない。
(次回確認します。)
まとめ
今回は、これくらいで・・・
細かい課題は、調べながらやっているので、 テンポよく進められないですね。 一通り環境がそろえば、開発に注力できるはずなのですが・・・
