現場のフロント開発でVue.jsを利用する機会があったので、
Vue CLIのインストールから、プロジェクトの作成までやってみた。
環境
yarn
→ v1.22.5
node.js
→ v12.13.1
Vue CLI
→ v4.5.11
yarn, node.jsのインストール
まず、vueのプロジェクトを作成する下準備として、
yarnとnode.jsのインストールを始めよう。
インストールする順番は、最初にnode.js。
下の各ダウンロードページからインストーラを落としてきて、
実行する。
yarnはインストーラを利用しなくても、node.jsをインストールした後に、
コマンドプロンプトで、↓ コマンドを実行すれば、インストールできる。
$ npm install --global yarn
両方、インストールが終わったタイミングで、
正常に落としてこれたか、コマンドプロンプトにて
以下コマンドを実行して確認しよう。
$ node -v
$ yarn -v
実行して、バージョンが表記されていればインストールは成功。
もし、バージョンが出なかった場合は yarn や node.js が
正しくインストールされていないので、他の記事などを見て、
もう一度インストールしよう。
※もしかすると、正常インストール出来ていても、コマンドプロンプトを再起動しないと、
バージョンが出てこないだけのパターンもあるので、
とりあえず最初にコマンドプロンプトを再起動するのがおすすめ。
vue-cliのインストール
では下準備が整ったので、vueのプロジェクトを作るために、
vue-cliのインストールを始めよう。
コマンドプロンプトを開いて、任意のパスにて、以下コマンドを実行する。
$ yarn global add @vue/cli
プロジェクト作成
このインストールが完了したら、今度はプロジェクトを作りたいパスに移動して、
vue create の後に、作りたいプロジェクト名を入力したコマンドを実行して、
実際にプロジェクトを作ってみる。
↓ みたいな感じで。
C:\vue\vue-sample-project>vue create project-01
今回は project-01 という名前で作ってみる。
コマンドを実行すると、プロジェクトの設定をすることになるので、
各々好きな設定をする。
今回は、TypeScriptを使ってみたいので、
筆者は以下のように設定していった。
Vue CLI v4.5.11
? Please pick a preset:
sample-project-01 ([Vue 2] node-sass, babel, typescript, router, vuex, unit-mocha, e2e-cypress)
Default ([Vue 2] babel, eslint)
Default (Vue 3 Preview) ([Vue 3] 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)
>(*) Choose Vue version
(*) Babel
(*) TypeScript
(*) Progressive Web App (PWA) Support
(*) Router
(*) Vuex
(*) CSS Pre-processors
(*) Linter / Formatter
(*) Unit Testing
(*) E2E Testing
次はとりあえず全部選択しておく。(スペースで選択のオンオフができる)
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 2.x
3.x (Preview)
ここは2を選んでおく。
? Use class-style component syntax? (Y/n) y
y と入力。
それ以降の設定は以下の通り。
? 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 node-sass)
? Pick a linter / formatter config: TSLint
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Mocha
? Pick an E2E testing solution: Cypress
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
? Save this as a preset for future projects? Yes
? Save preset as: sample-project-01
? Pick the package manager to use when installing dependencies: Yarn
ここまでくれば、あとは上記設定をプリセットできるように、
設定内容を保存するかどうか聞かれるので、デフォルトの設定として保存しておきたい人は
保存しておくこと。
そのあと、最初に入力した名前のプロジェクトが
指定したパス以下に作られるが、一緒にnode_moduleも入れてくれるはずなので、
作られたプロジェクト内で、改めて yarn installする必要はない。
※もしされていなければ、 yarn installを実行して入れればよい。
以下のように、作られたプロジェクトのパスにて、
yarn serveを実行。
C:\vue\vue-sample\sample-vue-project>yarn serve
yarn run v1.22.5
$ vue-cli-service serve
INFO Starting development server...
Starting type checking and linting service...
Using 1 worker with 2048MB memory limit
98% after emitting CopyPlugin
DONE Compiled successfully in 4259ms 19:45:45
Type checking and linting in progress...
App running at:
- Local: http://localhost:8080/
- Network: http://172.16.13.185:8080/
Note that the development build is not optimized.
To create a production build, run yarn build.
No type errors found
No lint errors found
Version: typescript 3.9.7, tslint 5.20.1
Time: 8526ms
実行が終わったら ↓ の部分に書いてある、
URL: http://localhost:8080/ に、任意のブラウザでアクセスしてみる。
App running at:
- Local: http://localhost:8080/
↓ のようなサンプル画面が表示出来たら、成功！
以上。