24
15

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Parcel+VueJS環境づくりまで

Last updated at Posted at 2017-12-09

もう古いので

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

参考記事

24
15
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
24
15

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?