vue-cli
vue-cli は vue.js のプロジェクトを準備するとき等に利用するツールです。
vue-cli でプロジェクトを作りましょう。
vue-cli を利用するには node.js をインストールして npm を利用して vue-cli をインストールします。
npm install -g @vue/cli
インストールが終わったら早速 vue-cli のプロジェクトテンプレートを利用してプロジェクトを作りましょう。
プロジェクトは vue create コマンドで作成します。
コマンドは vue create <project-name> で指定します。
vue create vue-ts-practice
起動するとプリセット選択に移ります。
Typescript を利用するために Manually select features を選択します。
Vue CLI v4.5.4
? Please pick a preset: (Use arrow keys)
> Default ([Vue 2] babel, eslint)
Default (Vue 3 Preview) ([Vue 3] babel, eslint)
Manually select features
とりあえず、全部チェックしておきます。
Vue CLI v4.5.4
? Please pick a preset: 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
Vue.jsのversionを聞かれるので3.x (Preview)を選択します。
Vue CLI v4.5.4
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Lint
er, Unit, E2E
? Choose a version of Vue.js that you want to start the project with
2.x
> 3.x (Preview)
以降設定について聞かれるので お好みで設定したら、プロジェクト作成が始まるので完了するまで待ちます。
完了すると以下のような画面になると思います。
� Successfully created project vue-ts-practice.
� Get started with the following commands:
$ cd vue-ts-practice
$ npm run serve
記述されているように
cd <プロジェクト名>
npm run serve
と実行すると構築されたプロジェクトが起動されます。
DONE Compiled successfully in 23867ms
App running at:
- Local: http://localhost:8080/
- Network: http://172.16.0.66:8080/
Note that the development build is not optimized.
To create a production build, run npm run build.
No issues found.
表示されているアドレス（http://localhost:8080） にブラウザで接続してみると Vue.js のウェルカムページに遷移します。
このプロジェクトを利用して Typescript で Vue.js を書いていきます。