建站
咨詢
售后
建站咨詢
新聞中心
先放圖
弱弱的說一句，我真的錯了。不該用parcel~
網(wǎng)站建設(shè)哪家好，找成都創(chuàng)新互聯(lián)！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、微信小程序、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了湯陰免費(fèi)建站歡迎大家使用！
前幾天，尤大開直播說了造輪子的好處，主要還是鍛煉自己。所以自己還是義無反顧地把這個項(xiàng)目搭建工具慢慢地造起來。
這次升級
這次版本是v1.0.5。
我們來看下這次版本的預(yù)裝依賴，我們的項(xiàng)目UI框架預(yù)先安裝上了ant-design-vue@2.1.4，默認(rèn)是按需加載。為什么這次是引入它，而不是element-plus，主要是考慮到parcel2針對babel.config.js這樣的JS文件對組件樣式引入實(shí)時檢測不是很好，你必須手動刷新才能獲取最新狀態(tài)。另外，parcel2官方推薦使用json格式的，還有element-plus按需引入時用到customStyleName: (name) => {})方法，在json文件沒法實(shí)現(xiàn)。所以，最終選用了ant-design-vue@2.1.4。為了搭配按需引入功能，我們引入了babel-plugin-import。
最后，我們這次又引入了最新版本vue@3.0.11，與之相對應(yīng)@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這次也進(jìn)行了重大更新，這次版本更新到1.0.9。
這次，做出的更新主要是拉取倉庫后，自動對遠(yuǎn)程倉庫進(jìn)行重置。這樣，你創(chuàng)建項(xiàng)目之后，可以自定義自己的倉庫地址。
實(shí)戰(zhàn)
搭建parcel-vue-app
安裝
- npm install parcel-vue-cli -g
查看版本
- parcel-vue-cli -v
初始化
- parcel-vue-cli init
啟動項(xiàng)目
安裝依賴
- 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
本文轉(zhuǎn)載自微信公眾號「前端歷劫之路」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系前端歷劫之路公眾號。
本文標(biāo)題：聊聊一款Vue3項(xiàng)目搭建工具Parcel-Vue-App
文章分享：http://www.dlmjj.cn/article/cdeijhp.html
