Vue.jsとVuetify.jsのインストールと初期設定方法

最近のフロントエンド技術のトレンドとしてVue.jsの流れが来ています。

今回はこのVue.jsのインストールから初期設定までを簡潔に解説したいと思います。

Vue CLIのインストール

Node.jsとnpmのバージョンは下記のです。

$ node -v
v8.11.2
$ npm -v
5.6.0

Vue.jsのプロジェクトを作るのにVue.jsのCLIツールを使います。yarn or npm で簡単にインストールできます。

$ yarn global add @vue/cli
// OR
$ npm install @vue/cli -g

Vue.jsのCLIを使ってプロジェクトを作成します。

$ vue create my-app && cd my-app

Vuetifyを使うためにVueコマンドを使ってpackage.jsonにvuetifyを追加します。

$ vue add vuetify

これだけでVue.js + Vuetifyの雛形プロジェクトが完成です。

起動はyarn serveコマンドで出来ます。

$ yarn serve
yarn run v1.9.4
# vue-cli-service serve
 INFO  Starting development server...
 98% after emitting CopyPlugin

 DONE  Compiled successfully in 10538ms                                                                                                                                                                                               22:43:27


  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.100.105:8080/

  Note that the development build is not optimized.
  To create a production build, run yarn build.

http://localhost:8080/かhttp://192.168.100.105:8080/にアクセスすると雛形プロジェクトのページを見ることができます。

今後はより詳しい使い方を解説していきます。

The following two tabs change content below.

• この記事を書いた人
• 最新の記事

髙妻智一

2013年CyberAgent新卒入社 スマホゲームを作る子会社に所属し、サーバーサイドのエンジニアを担当。２年目の終わりから新規子会社の立ち上げに参加し、サーバーサイドのエンジニアリーダーとしてサービースのリリースから運用までを担当。 2018年仮想通貨のスマホウォレットを提供するGinco Incにブロックチェーンエンジニアとして入社。

最新記事 by 髙妻智一 (全て見る)

• Polkadot(Substrate)のアドレスとトランザクションについて - 2023-03-09
• 【無料公開】「Goで始めるBitcoin」3章 Bitcoinノードとの通信　技術書典8 - 2020-03-08
• エンジニアがゼロから技術ブログを書くための方法をまとめました - 2019-05-25