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


関連記事

Stripe Connectで支払方法をクローンする

1 はじめに2 プラットフォームの顧客側の実装2.1 プラットフォームの顧客登録2.2 支払方法の登録3 支払方法クローンの実装3.1 顧客と支払方法のクローン3.1.1 支払方法のクローン3.1.2 ...

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

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

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

1 はじめに2 追加プランの作成3 実装3.1 日割り金額の確認3.2 追加プランの契約4 さいごに5 おすすめ書籍 はじめに 前回の記事では、プラン(月額)とユーザ数分のID(従量課金)という2種類 ...

laravel logo

Laravel SailでDocker環境構築

1 はじめに2 Laravel Sailの基本2.1 Dockerの構成2.2 コンテナの起動・停止2.3 sailで使用できるコマンド3 Laravel Sailの設定3.1 ポートフォワードの設定 ...

laravel logo

LaravelのHttp Facade

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

フォロー

blog-page_side_responsive

2019年6月
 1
2345678
9101112131415
16171819202122
23242526272829
30  

アプリ情報

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