vueの環境構築

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

Contents

1 vueとは?
- 1.1 方法1 CDN
- 1.2 方法2 npm+コンパイル

vueとは?

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

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

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

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

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

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

方法1 CDN

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

vueを読み込んでいるhtml

<html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.10/vue.js'></script>
<script src='./vue.js'></script>
<title>vue</title>
</head>
<body>
	<div id="demo">
     
	</div>
</body>
</html>

<html>

<head>

</head>

<body>

</div>

</body>

</html>

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

window.onload = function() {

	var demo = new Vue({
		el : '#demo',
		data : {
			message : 'Hello world'
		}
	})

}

window.onload = function() {

var demo = new Vue({

el : '#demo',

data : {

message : 'Hello world'

}

})

}

メリット

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

デメリット

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

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

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

方法2 npm+コンパイル

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

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

vueを読み込むhtml

<html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>vue</title>
</head>
<script src='./vuedist/build.js'></script>
<script src='./vue.js'></script>
<body>
    <div id="app">
    </div>
</body>
</html>

<html>

<head>

</head>

<body>

</div>

</body>

</html>

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

{
  "dependencies": {
    "vue": "^2.5.17"
  },
  "devDependencies": {
    "axios": "^0.18.0",
    "bootstrap": "^4.1.3",
    "gulp": "^3.9.1",
    "gulp-sass": "^4.0.1",
    "gulp-webpack": "^1.5.0",
    "jquery": "^3.3.1",
    "node-sass": "^4.9.3",
    "popper": "^1.0.1",
    "popper.js": "^1.14.4",
    "sugar": "^2.0.4",
    "tether": "^1.4.4",
    "vue-loader": "^15.4.2",
    "vue-resource": "^1.5.1",
    "vue-template-compiler": "^2.5.17",
    "webpack": "^4.20.0",
    "webpack-cli": "^3.1.1"
  }
}

{

"dependencies": {

"vue": "^2.5.17"

"devDependencies": {

"axios": "^0.18.0",

"bootstrap": "^4.1.3",

"gulp": "^3.9.1",

"gulp-sass": "^4.0.1",

"gulp-webpack": "^1.5.0",

"jquery": "^3.3.1",

"node-sass": "^4.9.3",

"popper": "^1.0.1",

"popper.js": "^1.14.4",

"sugar": "^2.0.4",

"tether": "^1.4.4",

"vue-loader": "^15.4.2",

"vue-resource": "^1.5.1",

"vue-template-compiler": "^2.5.17",

"webpack": "^4.20.0",

"webpack-cli": "^3.1.1"

}

webpack.config.js

const VueLoaderPlugin = require('vue-loader/lib/plugin')

var dest = __dirname + '/vuedist'; // 出力先ディレクトリ
var src =  __dirname + '/vueresource';  // ソースディレクトリ

module.exports = {
  //読み込みファイル
  entry: src + '/resource.js',
  //出力ファイル
  output: {
    path: dest,
    filename: 'build.js'
  },
  //コンパイルするときにモジュールが必要な場合
  //ここに記述
  module: {
    rules: [
      {
        //vueという拡張子ファイルに対して
        //vue-loaderを使うよという意味
        test: /\.vue$/,
        loader: "vue-loader"
      }
    ]
  },
  //これがないと→のエラーがでる[Vue warn]: You are using the runtime-only build of Vue where the template option is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
  resolve: {
      alias: {
        'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
      }
  },
  //template使うにはこれ入れないとだめ
  plugins: [
    new VueLoaderPlugin()
  ]
}

const VueLoaderPlugin = require('vue-loader/lib/plugin')

var dest = __dirname + '/vuedist'; // 出力先ディレクトリ

var src = __dirname + '/vueresource'; // ソースディレクトリ

module.exports = {

//読み込みファイル

entry: src + '/resource.js',

//出力ファイル

output: {

path: dest,

filename: 'build.js'

//コンパイルするときにモジュールが必要な場合

//ここに記述

module: {

rules: [

{

//vueという拡張子ファイルに対して

//vue-loaderを使うよという意味

test: /\.vue$/,

loader: "vue-loader"

}

]

//これがないと→のエラーがでる[Vue warn]: You are using the runtime-only build of Vue where the template option is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

resolve: {

alias: {

'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1

}

//template使うにはこれ入れないとだめ

plugins: [

new VueLoaderPlugin()

]

}

vueresource/resource.js

import Vue from 'vue'
//const vue = requre('vue')
//windowオブジェクトにセットしないとコンパイル後の別のJSで使えないようです。
window.$ = window.jQuery = require('jquery');
window.Vue = Vue

import Vue from 'vue'

//const vue = requre('vue')

//windowオブジェクトにセットしないとコンパイル後の別のJSで使えないようです。

window.$ = window.jQuery = require('jquery');

window.Vue = Vue

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

コンパイル方法

npx webpack

1	npx webpack

メリット

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

デメリット

学習コストが少し高い