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デザイン入門講座

blog-page_footer_336




blog-page_footer_336




-BackEnd
-,

執筆者:

免責事項

このブログは、記事上部に記載のある投稿日時点の一般的な情報を提供するものであり、投資等の勧誘・法的・税務上の助言を提供するものではありません。仮想通貨の投資・損益計算は複雑であり、個々の取引状況や法律の変更によって異なる可能性があります。ブログに記載された情報は参考程度のものであり、特定の状況に基づいた行動の決定には専門家の助言を求めることをお勧めします。当ブログの情報に基づいた行動に関連して生じた損失やリスクについて、筆者は責任を負いかねます。最新の法律や税務情報を確認し、必要に応じて専門家に相談することをお勧めします。


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


関連記事

rails

deviseを使ってユーザ登録フォームを作る

1 はじめに1.1 前提条件2 deviseについて2.1 deviseとは2.2 deviseでできること3 登録処理の実装3.1 Gemのインストール3.2 deviseのインストール3.3 デフ ...

laravel logo

LaravelのHttp Facade

1 はじめに2 基本定な使い方2.1 get2.2 post3 タイムアウト4 リトライ5 マルチパートリクエスト6 エラー処理7 さいごに8 おすすめ書籍 はじめに 現在関わっている案件でHttpク ...

laravel logo

LaravelのFacade(ファサード)とは? 何気なく使用していた裏側の仕組みを解説!

1 はじめに1.1 Facadeを使用しているクラス2 Facadeの仕組み3 Facadeの作成3.1 サンプルコードに必要な実装3.2 Serviceの作成3.3 Facadeクラスの作成3.4 ...

laravel logo

[Laravel] middlewareでHTTPリクエストの前後に処理を入れる

1 はじめに2 middlewareとは3 実装3.1 middleware作成3.2 コード実装4 middleware定義4.1 常に呼び出す4.2 特定のURLにアクセスした時のみ呼び出す4.3 ...

laravel logo

Laradock環境にPHPStormからXdebugする

1 はじめに2 Laradock側の設定変更2.1 xdebug.iniファイル2.2 .env2.3 コンテナの再構築3 PHPStormの設定3.1 Preferences3.1.1 Build, ...

フォロー

blog-page_side_responsive

2019年6月
 1
2345678
9101112131415
16171819202122
23242526272829
30  

アプリ情報

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