はじめての Vue.js 環境構築編


# 環境構築を行う

Vue.jsを開発するにあたり、必要な手順をまとめます。（Dockerにした方が良かったかな。。。）

## 開発環境構築
開発環境：Windows10
開発に必要なアプリケーションは Scoop を使ってインストールしてみます。
[Windows用アプリケーション管理 Scoop に乗り換える](Qiita https://qiita.com/morozumi_h/items/ccf936a7854dd7e1cc0d)
また、フロントエンドの開発には npm ではなく yarn を使ってみようかなと思います。

``` ps
PS C:\Users\user> scoop search yarn
'main' bucket:
    yarn (1.22.4)

PS C:\Users\user> scoop install yarn
Scoop uses Git to update itself. Run 'scoop install git' and try again.
Installing 'yarn' (1.22.4) [64bit]
yarn-1.22.4.msi (1.6 MB) [====================================================================================] 100%
Checking hash of yarn-1.22.4.msi ... ok.
Extracting yarn-1.22.4.msi ... done.
Linking ~\scoop\apps\yarn\current => ~\scoop\apps\yarn\1.22.4
Persisting cache
Persisting mirror
Persisting global
Running post-install script...
'node' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。
'node' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。
'node' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。
'node' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。
'yarn' (1.22.4) was installed successfully!
'yarn' suggests installing 'nodejs' or 'nodejs-lts' or 'nvm' or 'nvs'.

PS C:\Users\user> scoop search node
'main' bucket:
    eventstore (4.1.4) --> includes 'EventStore.ClusterNode.exe'
    node-chakracore (10.13.0)
    nodejs (13.12.0)
    nodejs-lts (12.16.1)
    sliksvn (1.12.0) --> includes 'svn-populate-node-origins-index.exe'

PS C:\Users\user> scoop install nodejs
Scoop uses Git to update itself. Run 'scoop install git' and try again.
Installing '7zip' (19.00) [64bit]
7z1900-x64.msi (1.7 MB) [=====================================================================================] 100%
Checking hash of 7z1900-x64.msi ... ok.
Extracting 7z1900-x64.msi ... done.
Linking ~\scoop\apps\7zip\current => ~\scoop\apps\7zip\19.00
Creating shim for '7z'.
Creating shortcut for 7-Zip (7zFM.exe)
'7zip' (19.00) was installed successfully!
Installing 'nodejs' (13.12.0) [64bit]
node-v13.12.0-win-x64.7z (16.2 MB) [==========================================================================] 100%
Checking hash of node-v13.12.0-win-x64.7z ... ok.
Extracting node-v13.12.0-win-x64.7z ... done.
Linking ~\scoop\apps\nodejs\current => ~\scoop\apps\nodejs\13.12.0
Persisting bin
Persisting cache
Running post-install script...
'nodejs' (13.12.0) was installed successfully!

PS C:\Users\user> scoop install nvm
Scoop uses Git to update itself. Run 'scoop install git' and try again.
Installing 'nvm' (1.1.7) [64bit]
nvm-noinstall.zip (2.3 MB) [==================================================================================] 100%
Checking hash of nvm-noinstall.zip ... ok.
Extracting nvm-noinstall.zip ... done.
Running pre-install script...
Linking ~\scoop\apps\nvm\current => ~\scoop\apps\nvm\1.1.7
Creating shim for 'nvm'.
Persisting nodejs
Persisting elevate.cmd
Persisting elevate.vbs
Persisting settings.txt
'nvm' (1.1.7) was installed successfully!
Notes
-----
You'll need to restart powershell/cmd to have it reload Environment Variables so nvm will work correctly

PS C:\Users\user> yarn --version
1.22.4
PS C:\Users\user> node --version
v13.12.0
PS C:\Users\user> nvm --version

Running version 1.1.7.

Usage:

  nvm arch                     : Show if node is running in 32 or 64 bit mode.
  nvm install <version> [arch] : The version can be a node.js version or "latest" for the latest stable version.
                                 Optionally specify whether to install the 32 or 64 bit version (defaults to system arch).
                                 Set [arch] to "all" to install 32 AND 64 bit versions.
                                 Add --insecure to the end of this command to bypass SSL validation of the remote download server.
  nvm list [available]         : List the node.js installations. Type "available" at the end to see what can be installed. Aliased as ls.
  nvm on                       : Enable node.js version management.
  nvm off                      : Disable node.js version management.
  nvm proxy [url]              : Set a proxy to use for downloads. Leave [url] blank to see the current proxy.
                                 Set [url] to "none" to remove the proxy.
  nvm node_mirror [url]        : Set the node mirror. Defaults to https://nodejs.org/dist/. Leave [url] blank to use default url.
  nvm npm_mirror [url]         : Set the npm mirror. Defaults to https://github.com/npm/cli/archive/. Leave [url] blank to default url.
  nvm uninstall <version>      : The version must be a specific version.
  nvm use [version] [arch]     : Switch to use the specified version. Optionally specify 32/64bit architecture.
                                 nvm use <arch> will continue using the selected version, but switch to 32/64 bit mode.
  nvm root [path]              : Set the directory where nvm should store different versions of node.js.
                                 If <path> is not set, the current root will be displayed.
  nvm version                  : Displays the current running version of nvm for Windows. Aliased as v.

```
## Vue の環境構築

``` ps
PS C:\Users\user> yarn global add @vue/cli
yarn global v1.22.4
[1/4] Resolving packages...
warning @vue/cli > @vue/cli-shared-utils > request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
warning @vue/cli > @vue/cli-ui > vue-cli-plugin-apollo > apollo > git-parse > babel-polyfill > core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
warning @vue/cli > jscodeshift > micromatch > snapdragon > source-map-resolve > resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
warning @vue/cli > jscodeshift > micromatch > snapdragon > source-map-resolve > urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
warning @vue/cli > @vue/cli-ui > vue-cli-plugin-apollo > apollo > git-parse > babel-polyfill > babel-runtime > core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
[2/4] Fetching packages...
info fsevents@1.2.12: The platform "win32" is incompatible with this module.
info "fsevents@1.2.12" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "@vue/cli@4.3.1" with binaries:
      - vue
Done in 88.98s.

```

# Vue CLIを使ったプロジェクト作成

``` ps
PS C:\Users\user\Documents> vue create sample-vue-project
?  Your connection to the default yarn registry seems to be slow.
   Use https://registry.npm.taobao.org for faster installation? Yes


Vue CLI v4.3.1
? Please pick a preset: default (babel, eslint)
? Pick the package manager to use when installing dependencies: Yarn


Vue CLI v4.3.1
✨  Creating project in C:\Users\user\Documents\sample-vue-project.
⚙️  Installing CLI plugins. This might take a while...

yarn install v1.22.4
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@1.2.12: The platform "win32" is incompatible with this module.
info "fsevents@1.2.12" is an optional dependency and failed compatibility check. Excluding it from installation.
                                                                                                                                                                                                                                                success Saved lockfile.
Done in 75.54s.
�  Invoking generators...
�  Installing additional dependencies...

yarn install v1.22.4
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@1.2.12: The platform "win32" is incompatible with this module.
info "fsevents@1.2.12" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
                                                                                                                        success Saved lockfile.
Done in 18.66s.
⚓  Running completion hooks...

�  Generating README.md...

�  Successfully created project sample-vue-project.
�  Get started with the following commands:

 $ cd sample-vue-project
 $ yarn serve

```

## Vue を動かす

``` ps
PS C:\Users\user\Documents> cd .\sample-vue-project\
PS C:\Users\user\Documents\sample-vue-project> dir


    Directory: C:\Users\user\Documents\sample-vue-project

Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
d----          2020/04/08    15:09                node_modules
d----          2020/04/08    15:08                public
d----          2020/04/08    15:08                src
-a---          2020/04/08    15:08            214 .gitignore
-a---          2020/04/08    15:08             73 babel.config.js
-a---          2020/04/08    15:08            863 package.json
-a---          2020/04/08    15:09            322 README.md
-a---          2020/04/08    15:09         366310 yarn.lock

PS C:\Users\user\Documents\sample-vue-project> yarn serve
yarn run v1.22.4
$ vue-cli-service serve
 INFO  Starting development server...
98% after emitting CopyPlugin

 DONE  Compiled successfully in 4496ms                                                                          15:10:51


  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.128.105:8080/

  Note that the development build is not optimized.
  To create a production build, run yarn build.
```

![2020-04-08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18582/a1e3e505-7114-1a8a-b848-db5c1d819eef.png)