尤大都说了,别用parcel了。但我还是整出了一款Vue3项目搭建工具parcel-vue-app

简介: 尤大都说了,别用parcel了。但我还是整出了一款Vue3项目搭建工具parcel-vue-app

先放图


微信截图_20220506151709.png


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


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


这次升级


这次版本是v1.0.5。


微信截图_20220506151734.png


我们来看下这次版本的预装依赖,我们的项目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",
    "parcel": "^2.0.0-beta.2",
    "sass": "^1.32.8"
  },
  "dependencies": {
    "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


微信截图_20220506151734.png


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


实战


搭建parcel-vue-app


安装


npm install parcel-vue-cli -g


查看版本


parcel-vue-cli -v


初始化


parcel-vue-cli init <projectName>


启动项目


安装依赖


npm install


启动


npm run serve


打包


npm run build


仓库地址


github.com/maomincodin…

github.com/maomincodin



相关文章
|
4天前
|
人工智能 文字识别 小程序
旅游社用什么工具收报名 + 资料?不开发 App 也能自动收集信息
本文探讨了旅游行业中报名信息收集的常见痛点及解决方案,重点介绍了二维码表单工具在提升信息收集效率、简化操作流程方面的优势。通过对比多种工具,分析其适用场景与实际应用逻辑,为一线旅游从业者提供高效、低成本的执行参考。
|
5月前
|
JavaScript 前端开发 Android开发
【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
162 13
【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
|
11天前
|
存储 Android开发 数据安全/隐私保护
Thanox安卓系统增加工具下载,管理、阻止、限制后台每个APP运行情况
Thanox是一款Android系统管理工具,专注于权限、后台启动及运行管理。支持应用冻结、系统优化、UI自定义和模块管理,基于Xposed框架开发,安全可靠且开源免费,兼容Android 6.0及以上版本。
60 4
|
28天前
|
Java 数据安全/隐私保护 计算机视觉
银行转账虚拟生成器app,银行卡转账截图制作软件,java实现截图生成工具【仅供装逼娱乐用途】
本内容提供Java生成自定义图片的示例代码,涵盖基础图像创建、文本添加及保存功能,适合学习2D图形编程。包括教学示例图片生成、文本图层处理和数字水印技术实现方案。
|
28天前
|
存储 前端开发 安全
病历单生成器在线制作,病历单生成器app,HTML+CSS+JS恶搞工具
本项目为医疗病历模拟生成器,旨在为医学教学和软件开发测试提供数据支持,严格遵守《医疗机构病历管理规定》。
|
27天前
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
|
25天前
|
BI 开发工具 开发者
App全渠道统计方案:如何用一个工具整合所有获客渠道数据?
还在为地推、社群、广告等不同获客渠道的数据分散而烦恼吗?本文将教您如何用一个工具整合所有渠道数据,实现精准的渠道归因与效果分析。
45 0
|
28天前
|
Java 数据安全/隐私保护
银行转账虚拟生成器app,银行卡转账截图制作软件,java实现截图生成工具【仅供装逼娱乐用途】
本项目提供了一套基于Java的图片处理教学方案,包含自定义图片生成、图像水印添加及合法电子凭证生成技术示例。
|
29天前
|
监控 数据可视化 BI
微信计数器统计工具,QQ统计器手机APP,通过autojs实现后台
这是一款基于AutoJS的微信/QQ新增好友监控脚本,具备后台运行、自动统计每日新增好友数量、生成简单报表及定时提醒功能。
|
2月前
|
存储 人工智能 移动开发
uni-app+vue3接入deepseek-v3搭建跨端ai流式(小程序+app+h5)
基于Uniapp+Vue3+Markdown接入DeepSeek-V3聊天大模型,支持编译到H5+小程序+App端。实现流式输出、支持亮色/暗黑主题、代码高亮、会话本地存储等功能。
460 12

热门文章

最新文章