Parcel 构建 VueJS 应用 01：项目初始化

Ulyso

Parcel 是一款号称 0 配置的 Web 应用打包工具。它利用多核处理提供了极快的速度，并且不需要任何配置，就可以处理大部分工作。

安装

首先使用 Yarn 安装 Parcel

1yarn global add parcel-bundler
2# 或者
3# npm install -g parcel-bundler
4

创建项目

1mkdir parcel-vue && cd parcel-vue
2yarn init -y
3

首先，项目想要使用 VueJS, 需要安装

1yarn add vue
2

项目根目录创建 index.html 文件

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <meta http-equiv="X-UA-Compatible" content="ie=edge">
7    <title>Parcel Vue</title>
8</head>
9<body>
10    <div id="app"></div>
11    <script src="./src/main.js"></script>
12</body>
13</html>
14

接着，创建 src 目录，新建 main.js 和 App.vue 文件

1// main.js
2import Vue from "vue";
3import App from "./App.vue";
4
5new Vue({
6  el: "#app",
7  render: h => h(App)
8});
9
10// App.vue
11<template>
12    <div id="app">
13        Hello World!
14    </div>
15</template>
16

最后，在 package.json 文件中加入命令：

1"scripts": {
2    "dev": "parcel index.html",
3    "build": "parcel build index.html"
4  },
5

运行项目：

1yarn dev
2

效果如图：

关于项目

运行成功后，我们回到项目中：

我们发现目录中出现 dist 和 cache 目录， package.json 中 parcel 自动帮我们安装了几个依赖包。

dist ：项目构建后的文件
cache ：缓存文件
vue-hot-reload-api ：热更新依赖包
@vue/componet-compoler-utils 和 vue-template-compiler ：帮助 parcel 解析 vue