npm, yarnインストール
Mac OSの場合
- 以下に従ってhomebrewを入れる。
- https://brew.sh/index_ja.html
- 以下でインストールを確認
$ brew -v
# => 1.1.0
# Homebrew/homebrew-core (git revision bb24; last commit 2016-11-15)
- nodebrewを入れる。
$ brew install nodebrew
# ...
$ nodebrew -v
# => 0.9.6# ...(いろいろ表示される)
- 安定版のnodeをインストールする。
$ nodebrew install-binary stable
- PATHを通す
$ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile # bashの場合
# $ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zprofile # zshの場合
# *** ターミナル再起動 ***
- nodeのバージョン確認
$ node -v
- yarnも入れる
$ npm install --global yarn
# ...(いろいろ表示される)
$ yarn --version
Windows の場合
- 以下からnodeのインストーラ(LTS版)を取得して、インストールする。
- インストール確認
PS> node --version
::: v14.17.1
- yarnも入れる。
PS> npm install --global yarn
::: ...
PS> yarn --version
::: 1.22.10
- WSLの場合
sudo apt install -y nodejs npm
sudo npm install -g n
sudo n lts
# --- terminal reboot --- #
sudo apt purge -y nodejs npm
sudo apt autoremove -y
node -v
# -> v14.17.0
sudo apt install -y curlcurl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt update && sudo apt install yarn
yarn --version
# -> 1.22.5
vue/cliインストール
$ npm install -g @vue/cli
# $ sudo npm install -g @vue/cli # Linux, WSLの場合
スクリプト実行権限の設定(PowerShellのみ)
この項目は、自己責任で実施するか、PowerShell以外を使ってください。
PowerShellでvueコマンドを使う場合は、実行権限の変更が必要。
管理者モードでPowerShellを起動する。以下で実行権限を確認し、
PS> PowerShell Get-ExecutionPolicy
Restricted
以下で変更する。
PS> PowerShell Set-ExecutionPolicy RemoteSigned
PS> PowerShell Get-ExecutionPolicy
RemoteSigned
vue/cliでプロジェクト作成
$ vue create my-project
- 設定は以下の通り。
Vue CLI v4.5.13? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? 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)? Yes
? 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)
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save, Lint and fix on commit
? Pick a unit testing solution: Jes
t? Pick an E2E testing solution: Cypress
? Where do you prefer placing config for Babel, ESLint, etc.?: In dedicated config files
? Pick the package manager to use when installing dependencies: (Use arrow keys): Use Yarn
- 以下一つずつ説明。
- まず、マニュアルにする。
? Please pick a preset: Manually select features
- 次で設定する項目を選ぶ。PWA以外は有効とした（PWAはスマホ対応なので要らないと考えた）。
? Check the features needed for your project: Choose Vue version, Babel, TS, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
- vueのversionは新しい方を選択。
? Choose a version of Vue.js that you want to start the project with 3.x # vueは3.xを使用
- Noとする。vue3では、class-styleではなくcomposition APIという方がスタンダードらしい。
- React Hooksのうな型推論の恩恵を受けれるというのが自分的には好印象だったので。
? Use class-style component syntax? No
- ここはデフォルトのYes。
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
- サーバー側で対応が必要だが、SPAで操作履歴を見るためには、historyがあった方が都合よさそうなのでYes。
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
- 生CSSは辛そうなので、新しいdart-SCSSを使ってみる。
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
- Linterの設定。airbnbは結構厳しいみたいなので、Standardにした。
- Prettierは後でインストールする。
- 忘れないよう保存時に強制適用にする。
? Pick a linter / formatter config: Standard? Pick additional lint features: Lint on save, Lint and fix on commit
- テストフレームワークは標準になってきているJestを設定
? Pick a unit testing solution: Jest
- E2EテストはCypressが良いらしい。
? Pick an E2E testing solution: Cypress
- 各設定ファイルは別ファイルに合った方がいいかな。
? Where do you prefer placing config for Babel, ESLint, etc.?: In dedicated config files
- yarn, npmどちらを使うか聞かれたらyarnを選択。
? Pick the package manager to use when installing dependencies: (Use arrow keys): Use Yarn
サーバー起動
$ cd my-project$ yarn serve