使用 Parcel 构建 Vue.js 项目
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 项目几乎就是零配置，非常方便。
相关推荐
hline 2020-07-29
yuzhu 2020-11-16
85477104 2020-11-17
KANSYOUKYOU 2020-11-16
sjcheck 2020-11-03
怪我瞎 2020-10-28
源码zanqunet 2020-10-28
gloria0 2020-10-26
王军强 2020-10-21
学习web前端 2020-09-28
QiaoranC 2020-09-25
anchongnanzi 2020-09-21
安卓猴 2020-09-12
Macuroon 2020-09-11
kiven 2020-09-11
LittleCoder 2020-09-11
Cheetahcubs 2020-09-13
小焊猪web前端 2020-09-10
颤抖吧腿子 2020-09-04