前のパートに戻る 完了して次のパートへ  

  0-5 プロジェクトを作成しよう

前回のステップでインストールしたVue CLIを使って、新しいプロジェクトを作成します。

このパートでは、最後にローカルサーバーを立ち上げて下記のような画面が表示されたらOKです。

まず、vue create プロジェクト名で新しいプロジェクトを作成します。

$ vue create my-trello

上記のコマンドを実行すると以下の画像のような画面が表示されます。

まず、プリセットでManuallyを選択します。



次に最初に選択されている「Babel」と「Linter / Formatter」に加え、今回のアプリケーションで使う「Vuex」を追加で選択しましょう。

spaceキーで選択/非選択の変更ができます。

次にLintとフォーマッター機能を選択します。今回はそのまま進みます。

次にLintが実行されるタイミングを選択します。今回は「Lint on save」で進みます。

次にBabel等各種ライブラリの設定方法を選択します。今回はそのまま進みます。

次に上記でおこなってきた設定内容を保存しておくかを問われます。今回は「N」の保存しないを選択します。

確定してしばらくすると、下記のようにプロジェクト作成が成功したと表示されます。

アプリケーションのルートディレクトリへ移動して、開発サーバーを立ち上げましょう。

$ cd my-trello
$ npm run serve

コンパイルに成功するとURLが表示されます。

http://localhost:8080/ (表示されたURLに読み替えてください)にアクセスし、下記のような画面を確認できます。

開発するときはこの画面を開いたまま、行っていきましょう。

これでプロジェクトの作成は完了です。

おつかれさまでした!

議論

0 質問

このコースの評価は?