39
57

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Vue.jsについての基礎(インストール)

Last updated at Posted at 2019-07-28

#はじめに
おはようございます。こんにちは。こんばんは。
ワタタクです。
今回はVue.jsについて見けいけたらいいなと書いています。

では早速参ります。
#Vue.jsとは?
公式サイト

Vue.js(ヴュージェイエス)、またはVueは、Webアプリケーションにおけるユーザーインターフェイスを構築するための、オープンソースのJavaScriptフレームワークである。他のJavaScriptライブラリを使用するプロジェクトへの導入において、容易になるように設計されている。一方で高機能なシングルページアプリケーション(SPA)を構築することも可能である。

chromeの拡張機能のvuejs-devtoolsを入れて置くと便利。
#環境構築
今回はCDNを使わずvue-cliを使います。
##nodeがインストールされているか確認する

$ node -v
v11.2.0

もし、コマンドを叩いてもversionが表示されなかったらnode.jsをインストールしてください。
以下も確認して置いてください。

$ npm -v
6.9.0

##vue.jsのインストール
上記のことを確認したら、いよいよvue.jsをインストールしていきます。

$ npm install -g vue-cli

成功すれば以下を確認してください。

$ vue -V
3.1.1

確認できれば次のコマンドを実行してください。

$ vue init webpack test-vue

※test-vueの部分はプロジェクト名&ディレクトリ名になります。
いろいろ聞かれますが、全部EnterでもOKです。
実行が終わったら下記を実行してください。

$ cd test-vue
$ npm run dev

localhost:8080にブラウザからアクセスしてみてください。Vueアプリケーションの土台ができており、
下記の画面が表示されるはずです。

test-vue.png

これで環境構築は終了です。
お疲れ様でした。
#最後に
最後まで読んでいただきありがとうございました。
もし、間違い等、アドバイス、ご指摘等有れば教えていただけたら幸いです。

今後はVuex,Nuxt.jsについて触れていきたいと思います。

39
57
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
39
57

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?