從 webpack 到全面擁抱 Parcel #2 讓 Parcel 支援 vue

不懂程式設計發表於2017-12-21
WebVue

原文發表於：www.rails365.net

相關連結（網友提供）：

  1. parcel-plugin-vue

  2. parcel-demo

預設情況下 Parcel 是支援 React 和 Preact，可以通過檢視下面這個頁面得知。

https://parceljs.org/recipes.html

要讓 Parcel 支援 vue，需要簡單處理一下。（下面的方法是我嘗試的，如果有更好的，歡迎評論留言）

首先初始化一個專案。

$ mkdir parcel-vue
$ cd parcel-vue
$ npm init -y
複製程式碼

接著安裝 vue。

$ npm install vue
複製程式碼

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Parcel Vue</title>
</head>
<body>
  <div id="app">
    <h1>Hello Parcel</h1>
  </div>

  <script src="app.js"></script>
</body>
</html>
複製程式碼

然後寫一些 vue 的程式碼。

app.js

import Vue from 'vue/dist/vue.js';

const app = new Vue({
  el: '#app',
  template: `<h1>{{ name }}</h1>`,
  data() {
    return {
      name: 'hfpp2012'
    }
  }
})
複製程式碼

最後，執行 parcel index.html，結果如下：

從 webpack 到全面擁抱 Parcel #2 讓 Parcel 支援 vue

可能有更好的方法，歡迎大家評論留言。

相關文章