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/
