limitVue.js、PHP、Java、Cordova、Monacaを中心にハイブリッドアプリ開発、PWA開発など効率的なWEB、iOS、Androidアプリ開発の情報を共有します。今回からTypescriptを使ったVue.jsプロジェクト開発について解説していきます。サンプルとして保育園比較サイトを作ってみます。サンプルなので小規模なものになります。サーバー側はPHPで実装しますが、ここでは触れません。World!参考ページ旧VueCLIのアンインストールVueCLI3よりも前のバージョンを使っており、グローバルにインストールされていている方はアンインストールする必要があります。パッケージ名が旧バージョンから変更されているみたいですね。https://github.com/vuejs/vue-cli/tree/v2#vue-cli--VueCLIを初めて使う方は飛ばして、VueCLI3の導入からご覧下さい。VueCLI3の導入VueCLI3を導入します。https://cli.vuejs.org/guide/installation.html上記ページも書かれていますが、導入にはNode.js8.9以上が必要です。nvm-windows.Node.jsのインストールNode.jsのインストールがまだの方は以下のページからNode.jsをインストールして下さい。(最新版ではなく、推奨版を使うようにしましょう。)https://nodejs.org/ja/正しくインストールできたか確認しましょう。--versionv10.16.3上記のように、バージョンが表示されればOKです。Node.jsをインストールすると同時にnpmもインストールされるので、こちらも念のため確認しておきましょう。--version5.6.0同様にバージョンが表示されればOKです。CLI3をインストールします。@vue/cliこちらも正しくインストールしたか確認しましょう。--version3.11.0バージョンが表示されたでしょうか。されない場合はインストール時にエラーが発生している可能性があるので注意しましょう。続いてプロジェクトを作成します。今回はアプリ名を「hoiku」として進めます。プロジェクト作成コマンドプロジェクトの作成方法は以下の通りです。hoikuすると、プロジェクトの設定を自動で行うか、マニュアルにするか聞かれます。featuresデフォルト設定でもいいですが、今回はマニュアル設定を選びます。TestingTypeScript、Router、Vuexを導入するのでそれぞれに矢印キーでカーソルを合わせ、スペースキーで選択します。選択後に以下のようになっているはずです。Testing使いたいものの選択が終わったらEnterキーで終了します。続いて、Componentをclass形式で書くかどうか聞かれます。お好みですが、私は使うので「Y」と入力してEnter。(Y/n)ちなみに、class形式の書き方は以下のページを参照して下さい。https://jp.vuejs.org/v2/guide/typescript.html#%E3%82%AF%E3%83%A9%E3%82%B9%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB-Vue-%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88次の質問は、ポリフィル(最近の機能をサポートしていない古いブラウザーで、その機能を使えるようにするためのコード)に対する設定です。これは使うのがおすすめです。「Y」と入力してEnter。Routerのヒストリーモード使用に関する質問です。こちらも「Y」がおすすめ。(Y/n)次にLinter/Formatterの設定です。こだわりがなければデフォルトでOKです。Prettier「TSLint」を選択してEnter。続いて、Lint機能の選択です。個人的にはどちらでもいいのでデフォルトで。commit両方選ぶこともできるみたいです。ESLintなどの設定はどこで行うかという質問です。選択肢は「個別の設定ファイルで行う」or「package.json」で行うかです。1箇所で管理したいなら後者がおすすめです。個人的にはこだわりがないのでデフォルトにしました。package.json次はここまでで設定した内容を保存するか聞かれます。CLI3を使用してプロジェクトを作成する際に楽ですね。ここは「y」がおすすめです。「y」とするとどこに保存するか聞かれます。好きな場所を指定しましょう。as:ここでプロジェクト作成が始まります。hoiku.となればOKです。(hoikuはアプリ名)アプリケーションの起動プロジェクトが作成されたのでアプリを起動しましょう。上記の手順を踏めば、以下のように表示されているはずなのでこの通り実行しましょう。サクセスすれば以下のような画面が表示されます最初の画面これで開発の準備ができました。World!を表示してみて今回は終わりにしましょう。hoiku/src/views/Home.vueを開くと以下のようになっています。{}</script>以下のように、Homeクラスに変更を加えます。World!"}続いて、template部分を以下のように変更します。</div></template>画面を確認すると以下のようになっています。World!今回はここまでです。次回は本格的な実装を順を追って説明したいと思います。以下のページから続きをご覧になれます。プロジェク...2017-09-27【Vue.js】単一ファイルコンポーネントを使わないVue.jsで、画面間のデータ受け渡し。Vue.js【Vue.js】Vue.Draggableを使って、Vue.jsでドラッグ&ドロップを実装する【Vue.Draggable】Vue.jsはてなブログをはじめよう!duo-taro100さんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。