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

Karen110
• 阅读 1556

先放图

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

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

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

这次升级

这次版本是v1.0.5。

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

我们来看下这次版本的预装依赖,我们的项目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

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

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

实战

搭建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  

仓库地址

parcel-vue-cli:

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

parcel-vue-app:

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

本文转转自微信公众号** 前端历劫之路**原创https://mp.weixin.qq.com/s/z-UVqiOaVVHc36zfbAgV_Q,如有侵权,请联系删除。

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
1星期前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Stella981 Stella981
2年前
KVM调整cpu和内存
一.修改kvm虚拟机的配置1、virsheditcentos7找到“memory”和“vcpu”标签,将<namecentos7</name<uuid2220a6d1a36a4fbb8523e078b3dfe795</uuid
Easter79 Easter79
2年前
Twitter的分布式自增ID算法snowflake (Java版)
概述分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的。有些时候我们希望能使用一种简单一些的ID,并且希望ID能够按照时间有序生成。而twitter的snowflake解决了这种需求,最初Twitter把存储系统从MySQL迁移
Stella981 Stella981
2年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
2年前
35岁是技术人的天花板吗?
35岁是技术人的天花板吗?我非常不认同“35岁现象”,人类没有那么脆弱,人类的智力不会说是35岁之后就停止发展,更不是说35岁之后就没有机会了。马云35岁还在教书,任正非35岁还在工厂上班。为什么技术人员到35岁就应该退役了呢?所以35岁根本就不是一个问题,我今年已经37岁了,我发现我才刚刚找到自己的节奏,刚刚上路。
Wesley13 Wesley13
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
6个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这