尤大都说了,别用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



相关文章
|
16天前
|
测试技术
基于LangChain手工测试用例转App自动化测试生成工具
在传统App自动化测试中,测试工程师需手动将功能测试用例转化为自动化用例。市面上多数产品通过录制操作生成测试用例,但可维护性差。本文探讨了利用大模型直接生成自动化测试用例的可能性,介绍了如何使用LangChain将功能测试用例转换为App自动化测试用例,大幅节省人力与资源。通过封装App底层工具并与大模型结合,记录执行步骤并生成自动化测试代码,最终实现高效自动化的测试流程。
30 4
|
2月前
【Azure App Service】如何来停止 App Service 的高级工具站点 Kudu ?
【Azure App Service】如何来停止 App Service 的高级工具站点 Kudu ?
|
2月前
|
JavaScript Linux 应用服务中间件
【Azure 应用服务】FTP 部署 Vue 生成的静态文件至 Linux App Service 后,访问App Service URL依旧显示Azure默认页面问题
【Azure 应用服务】FTP 部署 Vue 生成的静态文件至 Linux App Service 后,访问App Service URL依旧显示Azure默认页面问题
|
3月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
|
2月前
|
XML 安全 Java
App安全检测实践基础——工具
App安全检测实践基础——工具
60 0
|
2月前
|
开发工具 数据安全/隐私保护 git
【Azure 应用服务】登录App Service 高级工具 Kudu站点的 Basic Auth 方式
【Azure 应用服务】登录App Service 高级工具 Kudu站点的 Basic Auth 方式
|
2月前
|
JavaScript 前端开发 安全
VUE——APP,后端,前端三端AES加密解密
VUE——APP,后端,前端三端AES加密解密
53 0
|
3月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的成人教育APP的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的成人教育APP的详细设计和实现(源码+lw+部署文档+讲解等)
|
3月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的多功能智能手机阅读APP的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的多功能智能手机阅读APP的详细设计和实现(源码+lw+部署文档+讲解等)
|
3月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的宠物饲养管理APP的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的宠物饲养管理APP的详细设计和实现(源码+lw+部署文档+讲解等)
下一篇
无影云桌面