Parcel + Vue 入门尝鲜

Webpack 久负盛名，包罗万象。若是用其造轮子的话，难免修修补补。年前兴起了Parcel打包工具，号称“极速零配置”，让人不胜向往。这不得空了，就来尝尝鲜，记录下如何使用 Parcel + Vue进行开发。

这里是示例代码!

• parcel-bundler(戳我)
  这是 Parcel 打包工具，“极速零配置”的起源。

• parcel-plugin-vue(戳我)
  这是一个 parcel 插件，使 pacel 支持 .vue 文件。

parcel-vue
├── package.json
├── .babelrc
├── index.html
├──src
   ├── App.vue
   ├── main.js

这是基本的项目结构。

1. 安装parcel相关开发依赖

   yarn add parcel-bundler parcel-plugin-vue babel-preset-env -D

2. 安装vue

   yarn add vue

3. 添加入口文件 index.html

4. 添加脚本内容 main.js 和 vue组件 App.vue

   // ./src/main.js
   import Vue from 'vue'
   import App from './App'
   
   new Vue({
   el: '#app',
   render: h => h(App)
   })

   // App.vue
   
   
   

5. 配置 .babelrc

   {
     "presets": [
        "env"
     ]
   }

大功告成！！！

// package.json
{
  ...,
  "scripts": {
    "start": "parcel index.html"
  },
  ...
}

yarn start

parcel build index.html --public-url ./