Vue CLIを使ってみる

参考にさせていただいたページ

Vue CLIのインストールまたは最新化

• Installation | Vue CLI

Creating a Project

• Creating a Project | Vue CLI

今日の環境

• macOS Monterey 12.1
• node v16.13.1
• npm 8.1.2
• yarn 1.22.17
• @vue/cli@4.5.15

グローバルにインストールする

npm install -g @vue/cli

または

yarn global add @vue/cli

プロジェクトを作成する

vue create vue_cli_sample

とりあえず今回は自分で選択してみます。

❯ Manually select features

以下の通り選択しました。

Vue CLI v4.5.15
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, TS, CSS Pre-processors, Linter, Unit
? Choose a version of Vue.js that you want to start the project with 3.x
? Use class-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Jest
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No

インストールが完了して、以下のように表示されました。

🎉  Successfully created project vue_cli_sample.
👉  Get started with the following commands:

 $ cd vue_cli_sample
 $ yarn serve

ディレクトリの作成と移動

vue_cli_sampleディレクトリができたので、ガイドにしたがって移動します。

cd vue_cli_sample

yarn serveする

ガイドにしたがってserveします。

yarn serve

「http://localhost:8080/」で以下のようなページが確認できるようになりました。

yarn buildしてみる

yarn build

以下のようにjsとcssのファイルが書き出されました。

  File                                 Size                                                                             Gzipped

  dist/js/chunk-vendors.22a50e02.js    60.25 KiB                                                                        22.76 KiB
  dist/js/app.19ee42b0.js              4.67 KiB                                                                         1.63 KiB
  dist/css/app.f7432183.css            0.33 KiB                                                                         0.23 KiB

  Images and other types of assets omitted.

 DONE  Build complete. The dist directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html
      
✨  Done in 13.93s.

package.jsonの記述内容を確認してみる

2022年1月8日にやってみたのですが、さきほどの選択内容だと以下の通りでした。

{
  "name": "vue_cli_sample",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "vue": "^3.0.0"
  },
  "devDependencies": {
    "@types/jest": "^24.0.19",
    "@typescript-eslint/eslint-plugin": "^4.18.0",
    "@typescript-eslint/parser": "^4.18.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-unit-jest": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^7.0.0",
    "@vue/test-utils": "^2.0.0-0",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^7.0.0",
    "prettier": "^2.2.1",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2",
    "typescript": "~4.1.5",
    "vue-jest": "^5.0.0-0"
  }
}

Vue CLIの場合はwebpack.config.jsは無いの？

「Working with Webpack | Vue CLI」によると、webpack.config.jsに記述していた設定は、vue.config.jsを作成してそこに書くようです。

所感

vue.config.jsの書き方を調べるのはちょっと面倒くさい気がしますが、環境構築がすごく簡単にできました。

これは楽ちんですねー。