聊聊一款Vue3项目搭建工具Parcel-Vue-App

先放图

弱弱的说一句，我真的错了。不该用parcel~

前几天，尤大开直播说了造轮子的好处，主要还是锻炼自己。所以自己还是义无反顾地把这个项目搭建工具慢慢地v z G 8 * I i ] {造起来。

这次升级

这次版本是v1.0.7 # ^ ^ l s H L I5。

我们来看下这次版本的预装依赖，我们的项目UI框架预先安装上了ant-y a e j L Adesig[ b n ^ { ^ Z v In-vue@2.1.4，默认是按需加载。为什么这次是引入它，而不是element-plus，主要是考虑到parcel2针对babel.config.js这样的JS文件对组件样式引入实d R J @ m )时检测不是很好，你9 { ( P ) I @ e必须手动刷新才能获取最新状态。另外，parcel2官方推荐使用json格式的，还有element-o 9 O s \ xplus按需引入时用到customStyleName: (name) => {})方法，在json文件没法实现。所以，最终选用了ant-design-vue@2.% G \1.4。为了搭配按需引入功能，我们引入了w r 9 $ n S _babel-plugin-import。

最后，我z & T y们这次又引入了最新版本vue@3.0.11，与之相对应@vue/compiler-sfc@3.0.11。

好了，我们来看下我们引入的全部依赖。

"devDependencies":{
"@Y a ` B $ N O F kparcel/bai k 8bel-plugin-transform-runtime":"^2.0.0-nightly.1823",
"@parcel/transformer-image":"2.0.5 ` I R b0-beta.2",
"@parcel/transformer-sass":"2.0.0-beta.2",, * l y # L
"@parcel/transformer-vue":"2.0.0-beta.2",I { 1 ; O G m
"# c % \ * 0 x : :@vue/compiler-sfc":"^3.0.11",
"babel-eslint":"^10.1.0",
"babel-plug6 % Z ( } s 8in-imporK 0 ,t":"^1.13.3",
"eslint":"^7.23.0",
"eslint-plugin-vue":"^7.8.0",
"mockjs":"^1.1.0",
"parcel"8 % V ?:"^2.0.0-be& d n \ g 9 l 5ta.2",
"sass":"^1.32.8"
},
"dependencies":{
"ant-design-vue":"^2.@ I 4 m f d1.4",
"axios"9 h d ) g u v X \:"^0.21.1",
"vue":"^3.0.11",
"vue-router":"4",
"vuex":"^0 t C , \ & p4.0.0"
}

同样，为parcel-vue-app而生的脚手架parcel-vue-cli这次也进行了重大更新，这次版本更新到1.0.9。

这次，做出的更新K L K r Z主要是拉取仓库后，自动对远程仓库进行重置。这样，你创建项目之后，可以自定义自己的仓库地址。

实战

搭建parcel-vue-app

安装

npminstallparcel-vue-cli-g

查看版本

parcel-vue-cli-v

初始化

parcel-vue-cliinit<projectName>

启动项目

安装依赖

npminstall

启动

npmrunserve

打包

npmrunbuild

仓库地址

parcel-vue-cli：

https://github.com/mi ; n @ f ,aominco. A ? Uding/parcel-vue-cli

parcel-vue-app：

https://github.com/maomincoding/parcel-vue-app

本文转载自微信公众号「前端历劫之路」，可以通过以下二维码关注。转载本文请联系Z M @ \前端历劫之路公众号。

2512141116@qq.com

链接