もう古いので
https://qiita.com/rururu3/items/ba58f5538804186a6d76
こっちみてね
parcel時代が始まるらしい記事を見たのでVueJS動くかなって思って環境構築までしてみた
※vueファイル使用の記事は
https://qiita.com/rururu3/items/1eb8f64976810d97f37b
こちらに記載しました
parcelとは
https://parceljs.org/
コンフィグ無しでウェブアプリケーション作ろうぜ・・・って言う感じのビルドツール
環境構築
npm install --save-dev babel-preset-env parcel-bundler babel-preset-vue vue
各種ソース
".babelrc"
{
"presets": ["env", "vue"]
}
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A test</title>
</head>
<body>
<div id="app"></div>
<script src="./src/index.js" charset="utf-8"></script>
</body>
</html>
package.json
一部抜粋
"scripts": {
"start": "parcel index.html",
"test": "echo \"Error: no test specified\" && exit 1"
},
"devDependencies": {
"babel-preset-env": "^1.6.1",
"babel-preset-vue": "^2.0.0",
"parcel-bundler": "^1.1.0",
"vue": "^2.5.9"
}
src/index.js
import Vue from 'vue/dist/vue.esm.js';
import app from './app.jsx';
new Vue({
el: '#app',
template: '<app />',
});
src/app.jsx
import Vue from 'vue/dist/vue.esm.js';
Vue.component('app', {
methods: {
method () {
console.log('clicked')
}
},
render () {
return (
<div>
<a href="/" onClick:prevent={this.method}>
テスト
</a>
</div>
)
}
})
※コンパイラ入りパッケージ利用してるのでちょい手抜き
結果
感想
本当にgulpやらwebpackと戦う必要がない感じがする・・・けど、単一ファイルコンポーネント(.vue)使いたい・・・1時間ぐらい調べてとりあえず挫折したので、そのうち本格導入する際に再度調べたい
参考記事