amyuTweetPocket今年からVue.jsを使ったプロジェクトに関わるようになりました。前から気にはなっていたのですが、趣味で使う気にもなれず、ようやく触ることができました(自分が興味があった技術に触れることができる仕事というのもなかなかうれしいもんですね)。Vue.js自体は、去年の11月にヘルプとしていった出向先で少し触れています。拡張子がvueで、同じファイルにHTMLとJavaScriptとたまにCSSが書いてあるぞ。いうわけで今回はその、Vue.jsの単一ファイルコンポーネントのプロジェクトを作成する方法を紹介。大概、コマンドラインで作成する方法が紹介されることが多いですが、今回はWebブラウザを使った作成方法について紹介します。CLI3というVue.jsの開発支援ツールをnpmでインストール(npmが無い人はNode.jsでインストールしてください)。ui」とコマンドをうちます。すると、自動的にWebブラウザがたちあがって、下記のような画面が表示されます。日本語で書かれているので特に迷うことはないと思います(Vue.jsは本当、サポートページも日本語ページが存在して本当に便利です。3のサイトは日本語ページが存在しないんですよね......)。ここで「作成」ボタンを押し、プロジェクトを作成する新しいフォルダを作ります(この処理はいらないのですが、一応ここでフォルダも作れるという説明のために)。フォルダができたら、「+ここに新しいプロジェクトを作成する」というボタンをクリックします。下にある「次へ」ボタンをクリックします。スクリーンショットをとっていませんが、プロジェクトフォルダは「vue-test」としました。プリセットを選択します。RouterやVuexがインストールされないからです。後でこの二つについてもインストールします)。すると、プロジェクトの作成が始まります。「プロジェクトダッシュボード」という画面になると、プロジェクトが作成できています。フォルダを見てみると、確かにファイルができていました(と、ここで気づいたのですが、vue-testフォルダの下にvue-testフォルダができてしまっているという。そりゃあ、設定のプロジェクトフォルダなんて名前につけたからそりゃそうなりますよね......)。つづいて、左側のメニューの一番下にある「タスク」をクリックし、つづいてでてきたメニューの「serve」をクリックします。「タスクの実行」というボタンがでてくるので、このボタンをクリックします。すると、作成されたプロジェクトの開発用サーバ上で起動します。トップページは下記のようになっているはずです。uiを用いてインストールします。Routerを追加」や「Vuexを追加」ボタンが表示されています。予想できると思いますが、このボタンをクリックすることで簡単にインストールできます。インストールすると先ほどのトップページが下記のようになります。URLに「/#/」とついて、さらに「Home|About」というリンクが表示されてますね。Routerの機能です。「About」のリンクをクリックすると、下記のようになりました。Codeでプロジェクト内のsrcフォルダにあるmain.jsを見てみると、下記のようになっていました。Routerの機能のことで、「store」がVuexの機能です。Codeには、「Vetur」というvueファイル作成支援用の拡張機能を追加しています)。uiの画面ですが、左下にある家のアイコンボタンを押すことでホーム画面に戻れます。ui上で扱うこともできます。いうわけで、今年はVue.jsについていろいろ勉強していきたいと思います。コメントをキャンセルメールアドレスが公開されることはありません。世界一のアニメーション企業の今まで語られなかったお金の話(ブクログレビュー)当サイトは以下のサービス、ツールによって運営されています。