「old/vue.js/setup browserfy」の版間の差分
提供: 個人的記録
(→vueifyのインストール) |
細 (Gonbe がページ「vue.js/setup browserfy」を「old/vue.js/setup browserfy」に移動しました) |
||
(同じ利用者による、間の5版が非表示) | |||
1行目: | 1行目: | ||
− | [[Category: | + | [[Category:old/vue.js]] |
= セットアップ = | = セットアップ = | ||
== 前提 == | == 前提 == | ||
74行目: | 74行目: | ||
</pre> | </pre> | ||
* index.htmlをブラウザで表示し、「TEST」と表示されればコンパイルは正常にできている。 | * index.htmlをブラウザで表示し、「TEST」と表示されればコンパイルは正常にできている。 | ||
+ | * ブラウザ側で以下のようなエラーが発生することがある。このエラーは、コンパイル時にvue.jsが結合できていないときに発生する。 | ||
+ | <pre> | ||
+ | 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. </pre> | ||
+ | * package.json に以下の記述を追加し、結合するvue.jsを指定する。 | ||
+ | <pre> | ||
+ | "browser": { | ||
+ | "vue": "vue/dist/vue.common.js" | ||
+ | }, | ||
+ | </pre> | ||
=== gulpのインストール === | === gulpのインストール === |
2021年3月27日 (土) 21:27時点における最新版
目次
セットアップ
前提
node.jsの環境がインストール済みであること。
参考url
vue.js のセットアップ
- 適当にプロジェクト用のディレクトリを作成して移動する。
- 下記のコマンドでプロジェクトを初期化する。
npm init
- なにかいろいろ聞かれるけど、とりあえず全部enterでデフォルトのまま使う。
- 下記のコマンドでvueをインストールする。
npm install vue
- テストのために以下の内容のhtmlファイルを作成し、ブラウザで参照する。「TEST」と出れば正常にvueがinstallされている。
<html> </head> <title>TEST</title> </head> <body> <div id="app"> {{ message }} </div> </body> <script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script> <script type="text/javascript"> new Vue({ el: '#app', data: { message: 'TEST' } }) </script> </html>
browserifyのインストール
このままではブラウザで表示するたびにvue.jsのコンパイルが走ってよろしくない。
事前コンパイルを行うbrowserifyをインストールする。
- 以下のコマンドを実行し、browserifyをインストールする。
npm install browserify
- 以下のコマンドでbrowserifyのインストールパスを確認する。おそらく
node_modules\.bin
になっているはず。
npm bin
- index.htmlを以下のように記述する。
<html> <head> <title>TEST</title> </head> <body> <div id="app"> {{ message }} </div> </body> <script type="text/javascript" src="./bundle.js"></script> </html>
- main.jsに以下のように記述する。(最初に記述したindex.htmlからjavascript部分の切り出し)
var Vue = require('vue') new Vue({ el: '#app', data: { message: 'TEST' } });
- 以下のコマンドを実行し、main.jsをコンパイルする。
node_modules\.bin\browserify main.js -o bundle.js
- index.htmlをブラウザで表示し、「TEST」と表示されればコンパイルは正常にできている。
- ブラウザ側で以下のようなエラーが発生することがある。このエラーは、コンパイル時にvue.jsが結合できていないときに発生する。
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.
- package.json に以下の記述を追加し、結合するvue.jsを指定する。
"browser": { "vue": "vue/dist/vue.common.js" },
gulpのインストール
node.jsではmakeに相当するものとして、gulpがある。
ソースファイルは機能単位に分割したいので、ファイルが増加したときにそなえてgulpをセットアップする。
- 以下のコマンドでgulpをインストールする。
npm install gulp npm install vinyl-source-stream
- gulpでは vinly という形式のデータを対象に操作を行うらしい。browserify の出力結果はvinlyではないためそのままではgulpでは扱うことができないため、streamからvinlyに変換するために、vinly-source-streamが必要になるようだ。
- makefileに相当するのが、gulpfile.jsである。さきほどの、main.jsをコンパイルするgulifile.jsとして以下のように記述する。
//以下、コマンドの定義 var gulp = require('gulp') var browserify = require('browserify') var source = require('vinyl-source-stream') //タスクの定義。buildという名前でタスクを定義する。 gulp.task('build', function() { browserify({ 'entries': ['./main.js'] // browserifyに渡すソースファイルを配列で定義 }) .bundle() //ファイルを1ファイルにまとめる。 .pipe(source('bundle.js')) // まとめた結果にbundle.js という名前を指定する。 .pipe(gulp.dest('./')); // ./にまとめた結果を出力する。 }); //デフォルトタスクの指定 gulp.task('default', ['build']);
- 以下のコマンドででgulpを実行し、コンパイルできるかの確認を行う。
node_modules\.bin\gulp build
- node.jsのコンソールでは package.json にスクリプトの記述ができる。gulpの実行を楽にするため、以下のようにbuildスクリプトを追記する。
"scripts": { "build": "gulp build" }
- json形式での定義の中に、scriptsという定義(なければ追加)があるので、そこに"build"という名前で定義している。
- buildという名前で定義したスクリプトは以下の形式で実行する。
npm run build
balelのインストール
ES6でjavascriptを記述するため、babelをインストールする。
- 以下のコマンドを実行し、babelをインストールする。
npm install babelify babel-preset-es2015 npm install babel-plugin-transform-runtime
- package.jsonにbrowserifyの設定が必要みたいなことが参考もとに書かれているが、書くとなんかうまく動かないので書かない。
vueifyのインストール
vueの単一ファイルコンポーネントを使えるとコンポーネント物をコンポーネントで管理できるようになる。単一ファイルコンポーネントのコンパイルも取り扱うためにvueifyを導入する。
- 以下のコマンドでvueifyをインストールする。
npm install vueify
- gulpからvueifyを使用できるように、gulpfile.js を下記のように修正する。
//以下、コマンドの定義 var gulp = require('gulp') var browserify = require('browserify') var source = require('vinyl-source-stream') //タスクの定義。buildという名前でタスクを定義する。 gulp.task('build', function() { browserify({ 'entries': ['./main.js'], // browserifyに渡すソースファイルを配列で定義 'transform': ['vueify'] // vueifyでの変換を指定 }) .bundle() //ファイルを1ファイルにまとめる。 .pipe(source('bundle.js')) // まとめた結果にbundle.js という名前を指定する。 .pipe(gulp.dest('./')); // ./にまとめた結果を出力する。 }); //デフォルトタスクの指定 gulp.task('default', ['build']);
- さっきまで使ってたサンプルからテキスト部分を切り離し、text.vueという名前で以下のファイルを作成する。
<template> <p>{{message}}</p> </template> <script> export default { data() { return { "message":"TEST" } } } </script>
- index.htmlはテンプレート部分が不要になったので以下の内容に変更
<html> <head> <title>TEST</title> </head> <body> <div id="app"></div> </body> <script type="text/javascript" src="./bundle.js"></script> </html>
- main.jsを以下のように変更
const Vue = require('vue'); const App = require('./text.vue'); const app = new Vue({ render: function(createElement) { return createElement(App); }, }).$mount('#app')
- 変更後、gulpでコンパイルしブラウザで表示確認を行う。