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_responsive




-BackEnd
-,

執筆者:

免責事項

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


comment

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

CAPTCHA


関連記事

Stripe Connectを使って複合プランの継続課金を実装

1 はじめに1.1 想定する継続課金1.2 想定するシチュエーション2 継続課金商品の作成2.1 プランの継続課金商品の作成2.2 ID数の継続課金商品の作成3 実装3.1 プランAとID数を30契約 ...

laravel logo

Laravelの基礎知識

1 はじめに2 Laravelの概要2.1 学習コストが低い2.2 Symfonyがベース2.3 DIを積極的に活用している3 ディレクトリ構成3.1 app3.2 bootstrap3.3 conf ...

Go言語

[Go初心者]テストについて学習

1 はじめに2 テスト2.1 エラーの値を比較する2.2 エラーの型を比較する3 httptest3.1 httptestの使い方4 さいごに5 おすすめ書籍 はじめに 今回はGo言語のテストについて ...

Pythonで書かれたスクレイピングのコードをRubyで書いてみる

1 はじめに2 仕様3 ソースコード4 使用したモジュール、Gem5 対象ページを取得6 XPATHから目的のものを抜き出す7 次のページのリンクを取得する8 さいごに はじめに 以前、技術評論社さん ...

Next.jsのrevalidatePathとrevalidateTag

1 はじめに2 前提3 revalidatePathとrevalidateTag3.1 revalidatePath3.2 revalidateTag4 今回の場合5 おすすめ書籍 はじめに Next ...

フォロー

blog-page_side_responsive

2019年6月
 1
2345678
9101112131415
16171819202122
23242526272829
30  

アプリ情報

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