環境構築を行う
Vue.jsを開発するにあたり、必要な手順をまとめます。（Dockerにした方が良かったかな。。。）
開発環境構築
開発環境：Windows10
開発に必要なアプリケーションは Scoop を使ってインストールしてみます。
[Windows用アプリケーション管理 Scoop に乗り換える](Qiita https://qiita.com/morozumi_h/items/ccf936a7854dd7e1cc0d)
また、フロントエンドの開発には npm ではなく yarn を使ってみようかなと思います。
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 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 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 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.
