Vue.jsアプリケーションをビルドしてバンドルするための標準的な方法は次のとおりです。 webpack 、そして実際、Vue関連のほとんどすべてがWebpackを使用することを前提としています。 ただし、を持っていません。 ビルドツールなしでVue.jsを使用することも、代替モジュールバンドラーを使用することもできます。 この時点で、webpackの構成が非常に神秘的な旅になる可能性があるのは冗談ですが、町で唯一の選択肢ではありません。 現在ブロックにいる新しい子供はParcelJSです。 基本的にwebpackと同じ役割を果たしますが、ゼロ構成ツールとして機能します。 依存関係をインストールしてparcel buildを実行するだけで、完全にバンドルされたアプリが出てきます。

それでは、Vue.jsアプリの区画を設定する方法を見てみましょう。

アプリを書く

通常の手順とは対照的に、他の作業を行う前に、先に進んでスケルトンアプリファイルを設定しましょう。

プロジェクトディレクトリに、srcという名前の新しいディレクトリを作成します。 (最終的なファイル構造は次のようになります:)

./my-project
├── package.json // Generate this with `npm init`
├── index.html
├── .babelrc // Babel is needed.
└── src
    ├── App.vue
    └── main.js

典型的な基本的なindex.htmlから始めます。

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My Vue.js App</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- Note the reference to src here. Parcel will rewrite it on build. -->
    <script src="./src/main.js"></script>
  </body>
</html>

次に、Vueブートストラップコードを追加します。

src / main.js
import Vue from 'vue';
import App from './App.vue';

new Vue({
  el: '#app',
  render: h => h(App)
});

そして今、Appコンポーネント。

src / App.vue
<template>
  <div id="app">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App!'
    }
  }
}
</script>

<style lang="css">
  #app {
    color: #56b983;
  }
</style>

.babelrcも同様に投入してください。

.babelrc
{
  "presets": [
    "env"
  ]
}

区画の追加

Parcelの設定は、いくつかの依存関係をインストールするのと同じくらい簡単です。

まず、Vueアプリ自体に必要なものをすべてインストールしましょう。

# Yarn
$ yarn add vue

# NPM
$ npm install vue --save

次に、Vueのプラグインであるparcelとbabel-preset-env

# Yarn
$ yarn add parcel-bundler parcel-plugin-vue @vue/component-compiler-utils babel-preset-env -D

# NPM
$ npm install parcel-bundler parcel-plugin-vue @vue/component-compiler-utils babel-preset-env --save-dev

さて…まあ、それは実際にはそれだけです。

実行中の小包

これで、プロジェクトディレクトリでnpx parcelを実行することにより、ホットリロードを使用してアプリを開発モードで実行できるようになります。 ミニファイとデッドコード除去を使用して本番環境用にビルドするには、npx parcel buildを使用するだけです。

npxとは何か疑問に思っている場合は、こちらをご覧ください。 NPM 5.2.0以降がインストールされている限り、で動作するはずです。)

しかし、eslintが必要な場合はどうなりますか?

よろしくお願いします。 その場合は、eslinteslint-plugin-vueparcel-plugin-eslintをインストールしてください。

# Yarn
$ yarn add eslint eslint-plugin-vue parcel-plugin-eslint -D

# NPM
$ npm install eslint eslint-plugin-vue parcel-plugin-eslint --save-dev

.eslintrc.jsを作成することを忘れないでください)

.eslintrc.js
// https://eslint.org/docs/user-guide/configuring

module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:vue/essential'
  ]
}

LESS / SASS / PostCSSはどうですか?

それらは、箱から出してすぐにParcelによってサポートされます! Vueコンポーネントでも! 組み込みのアセットタイプの詳細については、公式のParcelドキュメントを参照してください。

詳細情報が必要ですか?

詳細なパーセルガイドをご覧ください。 ああ、そしていつものように、公式ドキュメントを読んでください! パーセルズは素晴らしくて短いです。