Edited at

Parcel+VueJS環境づくりまで


もう古いので

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>
)
}
})


※コンパイラ入りパッケージ利用してるのでちょい手抜き


結果

image.png


感想

本当にgulpやらwebpackと戦う必要がない感じがする・・・けど、単一ファイルコンポーネント(.vue)使いたい・・・1時間ぐらい調べてとりあえず挫折したので、そのうち本格導入する際に再度調べたい


参考記事

https://qiita.com/bitrinjani/items/b08876e0a2618745f54a