Vue

Vue.js は、Web上でUIを構築するための、漸進的で段階的に導入可能なJavaScriptフレームワークです。Parcelは、@parcel/transformer-vueプラグインを使用してVueを自動的にサポートします。.vueファイルが検出されると、自動的にプロジェクトにインストールされます。

注意: ParcelはVue 2でのSFCの使用をサポートしていません。 Vue 3 以降を使用する必要があります。

使用例

index.html

<!DOCTYPE html>
<div id="app"></div>
<script type="module" src="./index.js"></script>

index.js

import { createApp } from "vue";
import App from "./App.vue";

const app = createApp(App);
app.mount("#app");

App.vue

<template>
  <div>Hello {{ name }}!</div>
</template>

<script>
  export default {
    data() {
      return {
        name: "Vue",
      };
    },
  };
</script>

HMR

Parcelは公式のVue SFCコンパイラーを使用しており、HMRをすぐにサポートしているため、高速で反応的な開発体験が得られます。ParcelのHMRの詳細については、ホットリロードを参照してください。

Vue 3 の機能

ParcelはVue 3を使用しているため、Composition APIなど、すべてのVue 3の機能を使用できます。

App.vue

<template>
  <button @click="increment">
    Count is: {{ state.count }} Double is: {{
    state.double }}
  </button>
</template>

<script>
  import { reactive, computed } from "vue";

  export default {
    setup() {
      const state = reactive({
        count: 0,
        double: computed(() => state.count * 2),
      });

      function increment() {
        state.count++;
      }

      return {
        state,
        increment,
      };
    },
  };
</script>

言語サポート

Parcelは、Vueのスクリプト言語としてJavaScript、TypeScript、およびCoffeeScriptをサポートしています。

ほとんどすべてのテンプレート言語（consolidateでサポートされているものすべて）を使用できます。

スタイリングには、Less、Sass、およびStylusがサポートされています。さらに、CSS Modulesとスコープ付きスタイルは、moduleおよびscoped修飾子で使用できます。

App.vue

<style lang="scss" scoped>
  /* This style will only apply to this module */
  $red: red;
  h1 {
    background: $red;
  }
</style>

<style lang="less">
  @green: green;
  h1 {
    color: @green;
  }
</style>

<style src="./App.module.css">
  /* The content of blocks with a `src` attribute is ignored and replaced with
   the content of `src`. */
</style>

<template lang="pug"> div h1 This is the app </template>

<script lang="coffee">
  module.exports =
    data: ->
      msg: 'Hello from coffee!'
</script>

カスタムブロック

Vueコンポーネントでカスタムブロックを使用できますが、それらのブロックをどのようにプリプロセスするかを定義するには、.vuerc、vue.config.jsなどでVueを設定する必要があります。

.vuerc

{
  "customBlocks": {
    "docs": "./src/docs-preprocessor.js"
  }
}

src/docs-preprocessor.js

export default function (component, blockContent, blockAttrs) {
  if (blockAttrs.brief) {
    component.__briefDocs = blockContent;
  } else {
    component.__docs = blockContent;
  }
}

HomePage.vue

<template>
  <div>Home Page</div>
</template>

<docs> This component represents the home page of the application. </docs>

<docs brief> Home Page </docs>

App.vue

<template>
  <div>
    <child></child>
    docs: {{ docs.standard }} in brief: {{
    docs.brief }}
  </div>
</template>

<script>
  import Child from "./HomePage.vue";
  export default {
    components: {
      child: Child,
    },
    data() {
      let docs = { standard: Child.__docs, brief: Child.__briefDocs };
      return { docs };
    },
  };
</script>