聊聊一款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。
好了，我們來看下我們引入的全部依賴。
- "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-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
本文轉載自微信公眾號「前端歷劫之路」，可以通過以下二維碼關注。轉載本文請聯系前端歷劫之路公眾號。
