skillup

技術ブログ

JavaScript

vueの環境構築

投稿日:2019年3月10日 更新日:

vueについて勉強したことなどを。

vueとは?

近年のJavaScriptフレームワークの一種で「双方向データバインディング」というのが大きな特徴かと思います。

どんなことができるかというと入力フォームの変更があった瞬間にそれをキャッチして、別の部分の値を変えたり、メソッドを発言させるというようなことです。

もちろんこれらはjQueryでもできますが、jQueryの場合、基本的にDOMを使って値を取らなくてはいけないため、DOM構造が複雑になると値を管理するのが大変だったりします。

その点vueだと値自体を持たせることができるため、その必要がなくなります。Angularを以前に少しやりましたが、ほぼ一緒という印象です。

ちなみにvue自体の文法より、導入方法の方が難しいです(笑)

自分が調べた導入方法などをメモっていこうと思います。

方法1 CDN

ネットから直でvueを呼ぶ方法で、おそらく一番簡単な方法です。

vueを読み込んでいるhtml

vue.js(vue自体のプログラム)

メリット

  • 導入が簡単
  • 容量削減に繋がる

デメリット

  • バージョンアップにより動かなくなる可能性がある
  • ライブラリを一限管理(package.jsonなどで)できなくなる

ちなみにcdnに関してはバージョン無指定で最新バージョンを使うことができるものもあります(リンク参照)。

https://jp.vuejs.org/v2/guide/installation.html

方法2 npm+コンパイル

近年のライブラリ管理で一般的なnpmを使い、JavaScript自体をコンパイルして管理する方法です。

バージョンの問題かもしれませんが、プラグインなどを適切に管理しないとエラーが出て動きません。

vueを読み込むhtml

package.json(ライブラリ管理のみ)

webpack.config.js

vueresource/resource.js

vue.js自体は方法1と同じ

コンパイル方法

メリット

  • ライブラリを一限管理できる

デメリット

  • 学習コストが少し高い

-JavaScript
-,

執筆者:


comment

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

関連記事

no image

npmコマンドの整理

npmのコマンドのまとめに関して。 Contents1 npmとは?2 よく使うコマンド2.1 npm init -y2.2 npm install パッケージ名(npm -i パッケージ名)2.2. …

no image

クリック編集のjQuery

最近のWEBサービスだと表示の画面と編集画面が同じになっていて、一見表示なんだけど、クリックすると特定の項目は編集できる、そんな画面がふえていきていますよね。 先日社内アプリをつくっていたところ、そう …

no image

gulpに関して

gulpに関しての復習と色々と間違っていたところもあるのでまとめ。 ちなみに以前書いた記事は下記 gulpインストールとタスクの実行 Contents1 インストール2 タスクの実行3 npxコマンド …

no image

JavaScriptのトランスパイルについて

今回はJavaScriptのトランスパイルについて。 JavaSciprtではwebpackでコンパイルなどをする時に同時にトランスパイルという処理を行います。 トランスパイルとは? 主にES2015 …

no image

AngularJSについて

前回のbowerの記事でちょこっと書きましたが、最近はAngularJSというJavaScriptのフレームワークを触っています。 数年前から流行りだしているようで、少しずつ使っている方も増えているの …