Parcel+VueJS環境づくりまで

7508 ワード
parcel JavaScript Vue.js JavaScript テキストリンク

もう古いので

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時間ぐらい調べてとりあえず挫折したので、そのうち本格導入する際に再度調べたい

参考記事

[javascript] this keyword