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






よく読まれている関連記事はこちら



コメントを残す

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