当前位置: 首页 > 科技观察

说说Vue3项目构建工具Parcel-Vue-App

时间:2023-03-18 15:24:45 科技观察

不应该用包裹~前几天游达开了个直播,说了造轮子的好处,主要是锻炼自己。所以我还是义无反顾的慢慢搭建了这个工程构建工具。本次升级版本为v1.0.5。我们来看看这个版本预装的依赖。我们的项目UI框架预装了ant-design-vue@2.1.4,默认按需加载。这次为什么引入而不引入element-plus,主要是因为parcel2不太擅长引入实时检测babel.config.js等JS文件的组件样式,需要手动刷新才能获取最新状态.另外,parcel2官方推荐使用json格式,element-plus在按需导入时使用customStyleName:(name)=>{})方法,无法在json文件中实现。因此最终选择了ant-design-vue@2.1.4。为了配合按需导入功能,我们引入了babel-plugin-import。最后,我们这次介绍的是最新版本vue@3.0.11,对应@vue/compiler-sfc@3.0.11。好了,让我们看看我们引入的所有依赖。"devDependencies":{"@parcel/babel-plugin-transform-runtime":"^2.0.0-nightly.1823","@parcel/transformer-image":"2.0.0-beta.2","@parcel/transformer-sass":"2.0.0-beta.2","@parcel/transformer-vue":"2.0.0-beta.2","@vue/compiler-sfc":"^3.0.11","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","eslint":"^7.23.0","eslint-plugin-vue":"^7.8.0","mockjs":"^1.1.0","包裹":"^2.0.0-beta.2","sass":"^1.32.8"},"依赖项":{"ant-design-vue":"^2.1.4","axios":"^0.21.1","vue":"^3.0.11","vue-router":"4","vuex":"^4.0.0"}同样,parcel-vue-app的脚手架parcel-vue-cli这次也进行了一次大更新,这次版本更新到了1.0.9。这次更新主要是拉取仓库后自动重置远程仓库。这样,你在创建项目后,就可以自定义自己的仓库地址了。实战中搭建parcel-vue-app安装npminstallparcel-vue-cli-g查看版本parcel-vue-cli-v初始化parcel-vue-cliinit开始项目安装依赖npminstallStartnpmrunservePackagenpmrunbuild仓库地址parcel-vue-cli:https://github.com/maomincoding/parcel-vue-cliparcel-vue-app:https://github.com/maomincoding/parcel-vue-app您可以通过以下二维码关注。转载本文请联系前端公众号。