ヤビブロ

  • ホーム
  • ブログ
  • お問い合わせ

ヤビブロ

  • ホーム
  • ブログ
  • お問い合わせ

【Yarn + Vue CLI】を使って簡単にVue.jsの環境構築をする方法

2019年6月17日
logo_vue

Vue.jsの環境構築が簡単にできる『Vue CLI』の使い方を備忘録として残しておきます。

Vue CLIとは?

■コマンドラインでVue.jsの開発環境をセットアップする為のツール
■Vue.jsの開発に必要なツール類を選択方式の質問に答えるだけで、下記のようなツールをまとめてインストールすることができる

・トランスコンパイラ: ES6などのブラウザが対応していない新しいJavascriptをES5に変換
・Vue.js関連のライブラリ: Vue router 、Vuexを追加
・静的解析ツール(リントツール): 構文チェックツール
・テストツール

スポンサードサーチ

Node.jsのインストール

Node.jsのインストールが必要になるので、まだの方は過去に手順の記事を書いたのでよかったらご参考ください。

Homebrew(nodebrew)経由でnode.jsインストール、gulp環境を構築する方法

yarnのインストール

ターミナルで下記内容を打ち込むことで、Homebrew経由でYarnをインストールすることができます。

yarnをインストールするコマンド

brew install yarn

参考:https://yarnpkg.com/ja/docs/install#mac-stable

Homebrewのインストールがまだの場合は、以下のページの『インストール』の下にあるスクリプトをコピペでターミナルに貼り付けることでインストールすることができます。

Homebrewをインストールするコマンド

/usr/bin/ruby -e “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)”

参考:https://brew.sh/index_ja.html

スポンサードサーチ

Vue CLIをインストール

yarn global add @vue/cli

Vueコマンドがインストールできたか確認

vue –version

Vue.jsのプロジェクトを作成

vue create 【プロジェクト名】とコマンドを打つことでプロジェクトを作成できます。

ここでは【vue-cli】という名前でプロジェクトを作成してみます。

vue create vue-cli

すると、下記のような確認画面が表示されるので進めていきましょう。

デフォルトのプリセットを使用するか、個別にインストールするかを選べます。

vuecli01

次に、プロジェクトで使用するライブラリを選択します。

デフォルトでBabelとLinterが選択されていますが、ここではRouterとVuex、CSS Pre-processosを選択します。

矢印で移動し、スペースキーで選択することができます。

vuecli02

Routerの動作モードについて質問されるので、エンターを押します。

vuecli03

CSSプリプロセッサの選択画面が表示されるので、Sass/SCSSを選択します。

vuecli04

次に、リンターの初期設定を選択する画面が表示されるので、今回はESLint with error prevention only を選択します。

vuecli05

リント(構文チェック)の実行タイミングが聞かれるので、Lint on saveを選択してコードの保存時にチェックが走るようにします。

vuecli06

各種設定ファイルを分けるか、package.jsonに記述するか質問されるので、そのまま In dedicated config files を選択します。

vuecli07

最後に、これまでの設定内容で保存するか質問されるのでエンターを押します。

vuecli08

以上でプロジェクトの作成は完了です!

vuecli09

作成したプロジェクトに移動し、yarn serve コマンドを打つとサーバーの起動ができます。
今回のサンプルの場合だと、http://localhost:8080/ もしくは、http://192.168.3.2:8080/にアクセスすることでページを表示することができます。

vuecli10

キャプチャのような画面が表示されれば、これでVue CLI を使った開発環境の構築は完了です!

vuecli11

関連記事

  • Homebrew(nodebrew)経由でnode.jsインストール、gulp環境を構築する方法2018年6月20日 Homebrew(nodebrew)経由でnode.jsインストール、gulp環境を構築する方法
  • コピペでOK!Vue.jsで『ハンバーガーメニュー』を実装する方法2019年3月8日 コピペでOK!Vue.jsで『ハンバーガーメニュー』を実装する方法
  • 【基礎】Vue.jsの『コンポーネント』とは?2019年6月25日 【基礎】Vue.jsの『コンポーネント』とは?
  • Uncaught Error: Syntax error, unrecognized expression: a[href^=#]エラーの解決方法!2017年11月3日 Uncaught Error: Syntax error, unrecognized expression: a[href^=#]エラーの解決方法!
  • 【git】新規作成、複製したファイルがsourcetree上で反映されない!?そんな時の解決法2019年1月30日 【git】新規作成、複製したファイルがsourcetree上で反映されない!?そんな時の解決法

スポンサードリンク

  • 最近の投稿

    • 【基礎】Vue.jsの『コンポーネント』とは?【基礎】Vue.jsの『コンポーネント』とは?2019年6月25日
    • 【Yarn + Vue CLI】を使って簡単にVue.jsの環境構築をする方法【Yarn + Vue CLI】を使って簡単にVue.jsの環境構築をする方法2019年6月17日
    • コピペでOK!Vue.jsで『ハンバーガーメニュー』を実装する方法コピペでOK!Vue.jsで『ハンバーガーメニュー』を実装する方法2019年3月8日
    • 【Mac】vscodeの拡張機能を一括インストールする方法【Mac】vscodeの拡張機能を一括インストールする方法2019年3月8日
    • js不要!cssのみで『無限ループスライダー』を作成する方法js不要!cssのみで『無限ループスライダー』を作成する方法2019年2月24日
    • jQuery・vue.js不要!javascriptで複数対応のアコーディオンを作成する方法jQuery・vue.js不要!javascriptで複数対応のアコーディオンを作成する方法2019年1月30日
    • 【git】新規作成、複製したファイルがsourcetree上で反映されない!?そんな時の解決法【git】新規作成、複製したファイルがsourcetree上で反映されない!?そんな時の解決法2019年1月30日
    • 【css】文字(テキスト)にborderをつけるように縁取りをする方法【css】文字(テキスト)にborderをつけるように縁取りをする方法2019年1月30日
  • カテゴリー

    • AMP (2)
    • android (1)
    • atom (2)
    • css (25)
    • facebook (1)
    • font (1)
    • form (1)
    • FTP (1)
    • git (3)
    • gulp (3)
    • html (2)
    • IE (1)
    • instagram (1)
    • iphone (3)
    • jquery (13)
    • js (5)
    • Mac (10)
    • Photoshop (5)
    • SourceTree (5)
    • Subversion (1)
    • twitter (1)
    • Vue.js (3)
    • Webフォント (1)
    • windows (2)
    • WordPress (7)
    • お知らせ (1)
    • サクラエディタ (1)
    • セキュリティ (1)
    • パララックス (1)
    • 便利ツール (6)
    • 差分チェック (1)
    • 日記 (4)
  • アーカイブ

  • タグ

    android atom background-image before break-all clcl clipmail counter-increment cssハック facebook git github html IE11 instagram iphone ipアドレス linear-gradient Math.random mCustomScrollbar Noto Sans Japanese select snapwidget SourceTree table tool transform transition twitter url改行 windows word-break お問い合わせ コピペ サクラエディタ スクロールバー タスクバー テキストエディタ パッケージ フォーム プラグイン 埋め込み 擬似クラス 改行コード 純正ボタン

    Copyright © 2016 ヤビブロ All Rights Reserved.