Parcel 是一款 Web 应用打包工具，与 Webpack 相比，最大的特点就是极速零配置。因为使用
npm会出现莫名其妙的安装失败问题，所以这里使用yarn管理依赖。
初始化项目
yarn init
安装依赖
yarn add parcel-bundler --dev
yarn add vue vue-router
项目目录
与 Vue CLI 3 构建的目录大致相同。
├── public
│ └── index.html
├── src
│ ├── components
│ │ ├── componentA.vue
│ │ └── componentB.vue
│ ├── App.vue
│ ├── main.js
│ └── router.js
├── package.json
// main.js
import Vue from 'vue';
import App from './App.vue';
import router from './router'
new Vue({
el: '#app',
router,
render: h => h(App),
});
<!-- public/index.html -->
<!-- 引入 main.js -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>parcel-vue</title>
</head>
<body>
<div id="app"></div>
<script src="../src/main.js"></script>
</body>
</html>
由于我是局部安装 Parcel，所以要执行 parcel 命令需要在 package.json 添加执行脚本。
{
"name": "parcel-vue",
"version": "1.0.0",
"main": "public/index.html",
"scripts": {
"dev": "parcel public/index.html",
"build": "rm -rf dist && parcel build public/index.html --public-url ./"
},
"devDependencies": {
"@vue/component-compiler-utils": "^2.6.0",
"parcel-bundler": "^1.12.1",
"vue-template-compiler": "^2.6.8"
},
"dependencies": {
"vue": "^2.6.10",
"vue-hot-reload-api": "^2.3.3",
"vue-router": "^3.0.2"
}
}
执行构建
启动开发服务器：
yarn run dev
项目打包构建：
yarn run build
最后
Parcel 从 v1.7.0 开始添加对 .vue 文件的支持，所以现在构建 Vue.js 项目几乎就是零配置，非常方便。