概要
Vueの使い方をアプリを作成しながら学んだ時のメモ
プロジェクトを作成してブラウザで確認するところまでを記述します。
プロジェクトの作成
vue create プロジェクト名
プロジェクトを作成する際に、作成に必要な情報を設定するよう求められるので選択
- プリセットの指定
Vue CLI v4.5.15
? Please pick a preset:
> default
Manually select features
プロジェクトで必要なプログラムを選択します。
上下の矢印キーで選択してEnterを押してください。
Manualを選択すると組み込む項目が表示されるのでスペースで選択します。
- Vueのバージョン選択
Vue CLI v4.5.15
? Choose a version of Vue.js that you want to start the project with:
> 2.x
3.x
使用するVueのバージョンを選択します。
- linter/formatter設定の選択
? Pick a linter / formatter config:
> ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier
Lintとformatternいついて設定します。
デフォルトで良い場合は一番上を選択してください。
- Lintの追加機能の設定
? Pick additional lint features:
> Lint on save
Lint and fix on commit
Lintの追加機能について設定します。
デフォルトで良い場合は一番上を選択してください。
- 設定情報の記述場所
? Where do you prefer placing config for Babel, ESLint, etc.?
> In dedicated config files
In package.json
設定した情報の記述場所を指定します。
デフォルトだと設定ファイル内に記述します。
- プリセットとして保存
? Save this as a preset for future projects?(y/N)
yを選択すると設定が保存されて次回以降設定する手間が省けます。
プロジェクトの実行
npm run serve
実行するとWebブラウザからアクセスできるようになります。
http://localhost:8080/にアクセスして表示されるか確認してください。