实战Parcel构建一个基于Vue.js的相册应用

前言

前段时间在我的个人博客上发了一篇《前端构建工具发展及其比较》，回顾了前端构建工具的发展历程和进化，其中最新出来的零配置打包工具Parcel我一直很好奇，它到底怎么零配置了？众所周知此前 Webpack 的配置简有点让人茫然和无措，虽然现在 Webpack 4 也号称零配置，但也是相对的，依然需要配置一些东西，而我使用了 Parcel 后我有点惊讶，这货居然连个配置文件也不需要，不像 Webpack 需要一个webpack.config.js这样的文件，Parcel真正是不需要配置，不需要指定什么入口、出口、插件配置之类的，看起来这货真的是个零配置工具。

实例介绍

Parcel有个中文网站：https://parceljs.org/，非常简洁，文档也比较清晰，但感觉也有点简陋吧，不然就不会那么简洁了。具体就不多说了，看一看官网就知道了。

我以这两天做的一个人相册应用为例子，这是一个Parcel结合Vue.js+VueRouter实现的一个简单应用，主要功能是展示相册列表，让后点击某个相册进入照片瀑布流布局页面，展示该相册下的所有照片。

对着官网文档搭建环境到跑起来，硬是花了我几个小时消化，试错，搜索等。下面是相册应用的整体目录：

实战Parcel构建一个基于Vue.js的相册应用

这个目录结构大家做过Vue.js项目的应该很清楚吧，就把一一介绍是什么了。

开始

安装依赖

首先在你正在使用的项目目录下创建一个 package.json 文件，然后安装npm install parcel-bundler --save这个包，这是使用Parcel必须的，注意使用 Vue 需要安装parcel-plugin-vue，而不是直接安装vue，parcel-bundler是主要的工具，对于vue结尾的单文件，需要单独处理文件类型。使用vue-router安装vue-router，如果你需要使用 Less 或 Sass 安装相应包即可，这里我使用 Sass 安装node-sass。