寝て起きて寝て

プログラミングが出来ない情報系のブログ

Vueの新規プロジェクトの作成から立ち上げまで

プロジェクトの作成

下記コマンドを実行

vue create 'プロジェクト名'

その後下記画面が出る

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

これはデフォルトのプリセットを使うか、マニュアルで使うもの指定するかを決められる。
今回は「 Manually select features」を選択 その後下記画面になる

? 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

ここではプロジェクトに必要なアプリケーションをスペースで選択してインストールできる

今回は下記のアプリケーションのインストールを行う

? 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

次にVueRouterでHTMLのHistoryモードを使うかを聞かれるのでYと入力

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

次に使用するCSS pre-processorの設定ができるのでSass/SCSS (with dart-sass) を選択

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

次にESLintの設定をどうするかの設定がでるので
エラーチェックのみを行うESLint with error prevention onlyを選択

? Pick a linter / formatter config: (Use arrow keys)
❯ ESLint with error prevention only 
  ESLint + Airbnb config 
  ESLint + Standard config 
  ESLint + Prettier

次にESLintをどこで実行するかの設定がでるので、コードの保存時の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

次に設定ファイルをどこに置きたいかの設定ができる
ここでは、設定を個別に分けるか、package.jsonに書き込むかを選択できる
設定ファイルは個別に管理するのでIn dedicated config filesを選択

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files 
  In package.json

最後にこれまで選択した内容を保存して次回も使えるかをきかれる
特に保存する必要はないのでNと入力

? Save this as a preset for future projects? (y/N) N

その後プロジェクトで使うアプリケーションのインストールや、ファイルの配置が行われる。

Vue CLI v3.9.3
✨  Creating project in /Users/shinyaabe/Desktop/Vue/sample-app

インストールが完了すると下記のように支持されるので cd sample-appからnpm run serveを行う

🎉  Successfully created project sample-app.
👉  Get started with the following commands:

 $ cd sample-app
 $ npm run serve

サーバー立ち上げ後下記のURLに接続する
ここではhttp://localhost:8080/

 INFO  Starting development server...
98% after emitting CopyPlugin

 DONE  Compiled successfully in 3567ms                                                                                                                                                    16:06:15


  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://192.168.0.107:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

画像のように表示されたら完了

Vueデフォルトページ
接続後画像