BackEnd

Vue.js+TypeScriptな環境整備

投稿日:

はじめに

Vue.jsはProgressive Frameworkをうたい、小規模から大規模までのフロントエンド開発をサポートしています。

画面の一部に動きをつけるような軽微な使い方であれば、フレームワークをCDNからダウンロードするのが最も簡単な導入方法だと思います。しかし、SPAを開発する場合など中規模以上の開発では、単一ファイルコンポーネントで開発することが多いのではないでしょうか。

今回は備忘録を兼ねて、中規模以上の開発を想定してvue-cliを使ってMac上にプロジェクトを作成する方法を紹介します。

vue-cliのインストール

vue-cliはVue.jsのプロジェクトを作成するツールです。標準設定の他に、使用するツールなどを対話形式指定してプロジェクトを作成することができます。

vue-cliはnpmを利用してインストールしますので、予めHomebrew等でnpmをインストールしておいてください。

npmをインストロールしたら、以下のコマンドでvue-cliをインストールします。

プロジェクトの作成

vue-cliをインストールしたら、 vue create コマンドでプロジェクトを作成します。

上記のコマンドを実行するとプリセット選択が表示されます。TypeScriptを使いたいので、Manually select features にカーソルを合わせてエンターを押します。

terminal 1

機能の選択

機能の一覧が表示されますので、自分が使いたい機能を有効化してエンターを押します。

terminal 2

シンタックスの選択

class-style component syntax を使うとTypeScriptのクラス構文で書くためのツールがインストールされます。

terminal 3

JavaScriptで以下のように書いていたものが、

以下のように書けるようになります。

CSSプリプロセッサの設定

使いたいものを選択しましょう。SCSSを使いたかったので Sass/SCSS (with dart-sass) を選択しました。

terminal 4

dart-sass と node-sass のどちらを使うかですが、こちらの記事を参考に dart-sass を使ってみることにしました。

Unit test

Unit test は Mocha + Chai か Jest のどちらかを選べます。

terminal 5

こちらの記事を参考に Jest を使ってみることにしました。

E2E test

E2E test は Cypress か Nightwatch のどちらかを選べます。

terminal 6

こちらの記事を参考に Cypress を使ってみることにしました。

設定一覧

最終的に以下のようになりました。 yarn か npm のどちらを使うかはお好みで選んでください。

terminal 7

ディレクトリ構成

最後に作成した直後のディレクトリ構成を記載します。

さいごに

vue-cliを使って、TypeScriptを使う場合でのVue.jsのプロジェクト作成方法を紹介しました。

おすすめ書籍

Vue.js入門 基礎から実践アプリケーション開発まで 基礎から学ぶ Vue.js 改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで 1冊ですべて身につくHTML & CSSとWebデザイン入門講座

page_footer_300rect




page_footer_300rect




-BackEnd
-,

執筆者:


comment

メールアドレスが公開されることはありません。

CAPTCHA


関連記事

rails

Rails Developer Meetup に参加してきました【1日目】

1 はじめに2 発表について2.1 安全かつ高速に進めるマイクロサービス化2.2 Rails in Microservices2.3 MySQL/InnoDB の裏側2.4 H2O/mruby でつく ...

rails

Ruby2.4でCookieを手動で復号する際に発生したエラーの対処

1 はじめに1.1 前提条件2 発生したエラー2.1 実際のコード2.2 エラー詳細2.3 原因3 どう対処したか3.1 修正後のコード はじめに こんにちは、onoです。 現在開発中のアプリケーショ ...

laravel logo

Laravelのバッチ処理を作る

1 はじめに2 環境3 artisanコマンド作成4 artisanコマンドをバッチとして登録する5 さいごに6 おすすめ書籍 はじめに こんにちは。webアプリにつきもののバッチ処理ですが、もちろん ...

php logo

PHP入門 〜文字列と数値の操作〜

1 はじめに2 基本ルール2.1 開始と終了のタグ2.2 ホワイトスペース2.3 大文字と小文字の区別2.4 コメント2.5 変数の定義3 文字列の操作3.1 文字列の定義3.2 無駄なスペースを削除 ...

rails

私たちのFactoryGirlとRspecの使用ルール その1

1 はじめに2 そもそもなぜ基本ルールなどを作成しようとしたのか?3 Rspec編3.1 describe、context、itの階層で使用する3.2 10個以上のテストレコードを作成したい場合は、ト ...

フォロー

follow us in feedly

page_side_300rect

2019年6月
« 5月 7月 »
 1
2345678
9101112131415
16171819202122
23242526272829
30 

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。