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.
画像のように表示されたら完了