VueとTyspeScriptを利用した開発が始まるので、キャッチアップとしての環境作成を行ってみました。vue-cliを利用すれば。対話形式でプロジェクトテンプレートが作成されるので特に問題なく環境を作成することができました。
まずglaobalにvue-cliを落とします。Vue CLIはVue.js向けアプリケーションの開発環境をセットアップしてくれるコマンドラインツールのことです。Nodejsは既に手元の環境に設定されているものとします(v8.11.2)
$ yarn global add @vue/cli
installしたら環境が整ったことを確認してみます。
$ vue --version
> 3.5.1
vueコマンドで、vueプロジェクトを作成します。今回はportfolio用にプロジェクトを作成するので、vue create < project-name > で作成しました。
$ vue create portfolio
そうするとプリセットの選択を質問されるので、デフォルト(babel、eslint)かマニュアル(色々な機能を追加できる)を選択する。今回はTypeScriptを使用するので、マニュアルを選択する。
Vue CLI v3.5.1
? Please pick a preset:
default (babel, eslint)
❯ Manually select features
必要な機能をspaceで追加してプロジェクトを作成します。必須としてい機能は、Babel,TypeScript,Linterくらいですが、今回は練習用のポートフォリオサイトなので全ての機能をオンにしています。
? Check the features needed for your project: (Press <space> to select, <a> to t
oggle all, <i> to invert selection)
❯◉ Babel
◯ TypeScript
◯ Progressive Web App (PWA) Support
◯ Router
◯ Vuex
◯ CSS Pre-processors
◉ Linter / Formatter
◯ Unit Testing
◯ E2E Testing
一応上からの機能軽くを調べてみる
- Babel:javascriptのバージョンの違いを解消する。
- TypeScript:型付nJavascript
- PWA support:PWAの機能使用をサポート
- Router: URL繊維を簡単に実現できるようになる
- Vuex: vueの状態管理用ライブラリ
- CSS Pre-processors: Sass,Scssなど使用できるように
- Linter: Linterを使用する
- UnitTesting:単体テスト
- E２E Testing:結合テスト
ここまで全て設定し、Enterを押すとプロジェクトが作成される。あとはディレクトリを変更し、サーバを起動する
$ cd portfolio
$ yarn serve
すると、ローカルサーバーが起動し、アクセスが可能となる。
[PC]
[SP]
以上で、環境設定までが完了した。