VueCLIの導入についてメモ書き

VueCLIの導入についてメモ書き

VueCLIの導入

あらかじめnpdeをインストールしておく。

ターミナルからvue cliをインストール

npm install -g @vue/cli@3.5.0

インストールされていることを確認

vue -V

vueプロジェクトを作成したいディレクトリに移動

C:\Users\ks\Desktop
λ cd vue\

プロジェクト名を決めて作成

C:\Users\sk88f\Desktop\vue
λ vue create test-project

インストールするモジュールをデフォルトのものを使うか自分で選択するかを選ぶ

? Please pick a preset: (Use arrow keys)
> default (babel, eslint)
  Manually select features

下矢印キーで Manually select features に移動してenterを押下

インストールするモジュールを選択する

? Please pick a preset: Manually select features

? Check the features needed for your project:
(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
(*) Router
(*) Vuex
>(*) CSS Pre-processors
(*) Linter / Formatter
( ) Unit Testing
( ) E2E Testing

矢印キーで上下移動、スペースでチェック

enterキーで次に進む

Vue CLI v3.5.0
┌────────────────────────────┐
│  Update available: 3.10.0  │
└────────────────────────────┘
? Please pick a preset: Manually select features // 導入するもののリスト
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter // 導入するもののリスト
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes // ルータの動作モードについて
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass) // CSSの種類
? Pick a linter / formatter config: Basic
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N)

enterでプロジェクトの作成開始

作成完了後アプリケーション直下ディレクトリで以下を実行

λ npm run serve

立ち上がったことを確認

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

コメントを残す