美图齐众专注资阳网站设计 资阳网站制作 资阳网站建设
资阳网站建设公司服务热线：028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后，网站问题一站解决

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

先放图

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

网站建设哪家好，找成都创新互联！专注于网页设计、网站建设、微信开发、微信小程序、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了汤阴免费建站欢迎大家使用！

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

这次升级

这次版本是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。

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

 
 
 
 
    
  
  
  
  
  1. "devDependencies": {
    2. 
  
  
  
  
  2.         "@parcel/babel-plugin-transform-runtime": "^2.0.0-nightly.1823",
    3. 
  
  
  
  
  3.         "@parcel/transformer-image": "2.0.0-beta.2",
    4. 
  
  
  
  
  4.         "@parcel/transformer-sass": "2.0.0-beta.2",
    5. 
  
  
  
  
  5.         "@parcel/transformer-vue": "2.0.0-beta.2",
    6. 
  
  
  
  
  6.         "@vue/compiler-sfc": "^3.0.11",
    7. 
  
  
  
  
  7.         "babel-eslint": "^10.1.0",
    8. 
  
  
  
  
  8.         "babel-plugin-import": "^1.13.3",
    9. 
  
  
  
  
  9.         "eslint": "^7.23.0",
    10. 
  
  
  
  
  10.         "eslint-plugin-vue": "^7.8.0",
    11. 
  
  
  
  
  11.         "mockjs": "^1.1.0",
    12. 
  
  
  
  
  12.         "parcel": "^2.0.0-beta.2",
    13. 
  
  
  
  
  13.         "sass": "^1.32.8"
    14. 
  
  
  
  
  14.     },
    15. 
  
  
  
  
  15.     "dependencies": {
    16. 
  
  
  
  
  16.         "ant-design-vue": "^2.1.4",
    17. 
  
  
  
  
  17.         "axios": "^0.21.1",
    18. 
  
  
  
  
  18.         "vue": "^3.0.11",
    19. 
  
  
  
  
  19.         "vue-router": "4",
    20. 
  
  
  
  
  20.         "vuex": "^4.0.0"
    21. 
  
  
  
  
  21.     }
    22.

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

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

实战

搭建parcel-vue-app

安装

 
 
 
 
    
  
  
  
  
  1. npm install parcel-vue-cli -g
    2.

查看版本

 
 
 
 
    
  
  
  
  
  1. parcel-vue-cli -v
    2.

初始化

 
 
 
 
    
  
  
  
  
  1. parcel-vue-cli init 
    2.

启动项目

安装依赖

 
 
 
 
    
  
  
  
  
  1. npm install
    2.

启动

 
 
 
 
    
  
  
  
  
  1. npm run serve
    2.

打包

 
 
 
 
    
  
  
  
  
  1. npm run build
    2.

仓库地址

parcel-vue-cli：

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

parcel-vue-app：

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

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


网站题目：聊聊一款Vue3项目搭建工具Parcel-Vue-App
URL链接：http://zsjierui.cn/article/cdeijhp.html

其他资讯