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でS3に画像をアップロードする

1 はじめに2 今回やりたいこと3 下準備3.1 ImageMagickをインストールする3.2 Gemをインストールする4 レコード生成時にファイルを指定してアップロードする4.1 アップローダを作 ...

rails

Railsのバリデーション

1 はじめに2 基本的なバリデーション3 EachValidatorクラス4 Validatorクラス5 autoload_pathsの編集6 さいごに はじめに 今回はRailsのActiveRec ...

laravel logo

Laradock環境にPHPStormからXdebugする

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

rails

Railsで複合主キーのテーブルを扱う

1 はじめに1.1 前提条件2 実装例2.1 config2.2 マイグレーション2.3 モデル3 さいごに はじめに RailsでWebサービスを開発する際のDB設計では基本的にidが主キーになると ...

rails

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

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

フォロー

follow us in feedly

page_side_300rect

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

アプリ情報

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