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

  2-1 Vue.jsのアプリを作成しよう

このパートでは、Vue CLIを用いて、Vue.jsのアプリを新規作成します。

このパートのテーマ


  • Vue CLIを使ってVue.jsアプリをセットアップできるようになる
  • Vue.jsアプリを開発モードで起動できるようになる

vue createでアプリを作成しよう


ターミナルで、プロジェクトフォルダを作成したいディレクトリ(デスクトップなど)に移動して下さい。

cd Desktop

Vue.jsアプリを新規作成するには、vue create <アプリ名>コマンドを実行します。

vue create whisperer

上のコマンドを実行すると、下のように質問されます。今回は「Manually select features」を選んでください。

Vue CLI v3.8.2
? Please pick a preset: (Use arrow keys)
  default (babel, eslint) 
❯ Manually select features

すると下のような選択画面に移ります。ここで

  • Router
  • CSS Pre-processors

の2つのみ選択してください。なお、選択切替はスペースキーで行います。

? Check the features needed for your project: (Press <space> to select, <a> to toggle 
all, <i> to invert selection)
❯◯ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◯ Vuex
 ◉ CSS Pre-processors
 ◯ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

続けていくつか質問されます。ヒストリーモード(URLに#を入れないようにする設定)の可否については「Yes」、CSSプリプロセッサーは「Stylus」を選択してください。あとは任意で構いません。

? Use history mode for router? (Requires proper server setup for index fallback in pro
duction) (Y/n) Y

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by def
ault): 
  Sass/SCSS (with dart-sass) 
  Sass/SCSS (with node-sass) 
  Less 
❯ Stylus 

プロセスが完了すると、Vue.jsアプリのフォルダが生成されています。

npm run serveでアプリを起動しよう


アプリの新規作成が完了したら、早速開発モードでアプリを起動してみましょう。

ターミナルからアプリを操作するには、まずプロジェクトフォルダのディレクトリ(プロジェクトフォルダのある場所)に移動する必要があります。ターミナルの操作に慣れている方は、cdで該当のディレクトリに移動するという方法でもちろん構いません。

cd whsperer

ですが、VS Codeでは、スタート画面から該当のフォルダを開くことで自動的にディレクトリも設定されるので、そうする方が簡単です。

下のように、VS Codeのスタート画面の「Start」から、「Open folder」を選びます。すると、ボックスが開くので、上で作成したフォルダを選択してください。そうすると、下にターミナルが自動で表示され、初めからフォルダのディレクトリにいる状態になっています。

さて、プロジェクトフォルダのディレクトリに移動した上で、

npm run serve

を実行して下さい。プロセスが終わると、localhost:8080でアプリのトップページが表示されます。

なお、npm run serveを実行すると、ターミナルが入力を受け付けない状態になってしまいます。このような時は、ターミナル上部のメニューの「+」ボタンを押すことで、新しいターミナルを追加できます。

以上でVue.jsアプリの作成は完了です。

議論

0 質問

このコースの評価は?