初衷
自己經(jīng)手的幾乎所有項目都是通過
vue-cli腳手架搭建的芍碧，幾乎能夠滿足日常的開發(fā)需求飞醉，偶爾再擴(kuò)展一下vue.config.js，感覺真香奠涌，有種無所不能的心態(tài)。項目做的多了磷杏，總是通過腳手架一把梭哈溜畅，總感覺缺少了點(diǎn)什么，是激情极祸、是探索的求知欲慈格？
今天抱著探索的心態(tài)怠晴，慢慢探索這個充滿好奇又未知的領(lǐng)域。以此共勉浴捆，記錄新的體會蒜田，留下自己的痕跡。
加油选泻，中年老王３逶痢！页眯！
node版本 14.17.0及以上梯捕，建議用14.17以上高版本的node，我這邊使用的node版本為14.18.1
一窝撵、創(chuàng)建項目命令
目前用到這些命令：
- 創(chuàng)建一個package.json
yarn init -y- 添加依賴及消除瀏覽器樣式差異
yarn add vue normalize.css- 安裝webpack腳手架工具
yarn add webpack webpack-cli webpack-dev-server html-webpack-plugin --dev- 安裝vue相關(guān)插件
yarn add vue-loader vue-loader-plugin vue-template-compiler --dev
注意事項：vue版本和vue-template-compiler版本保持一致- 安裝處理相關(guān)樣式圖片等資源插件
yarn add file-loader css-loader url-loader sass-loader node-sass --dev
二傀顾、目前package.json文件如下：
{
"name": "vue-manual",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"dev": "webpack serve --config webpack.config.js --progress"
},
"dependencies": {
"normalize.css": "^8.0.1",
"vue": "^2.6.14"
},
"devDependencies": {
"css-loader": "^6.5.1",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.5.0",
"node-sass": "^6.0.1",
"sass-loader": "^12.3.0",
"url-loader": "^4.1.1",
"vue-loader": "^15.9.8",
"vue-loader-plugin": "^1.3.0",
"vue-template-compiler": "^2.6.14",
"webpack": "^5.62.2",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^4.4.0"
}
}
三、創(chuàng)建相關(guān)文件夾及目錄
文件目錄截圖：
image.png
動態(tài)gif圖如下：
屏幕錄制2021-11-10 下午9.22.00.gif
四忿族、安裝上述命令安裝相關(guān)依賴
執(zhí)行命令
mac電腦：yarn dev
window電腦：npm run dev
項目正常運(yùn)行
屏幕錄制2021-11-10 下午9.44.30.gif
五锣笨、總結(jié)
該項目基于最新版本的webpack搭建
代碼倉庫地址：https://github.com/YiGeXiaoBing-520/vue-manual.git
克隆代碼后，切換至第一期對應(yīng)的分支
第一期分支代碼： develop-v1
目前完成的功能：
1道批、啟動本地開發(fā)服務(wù)器错英，實(shí)現(xiàn)熱更新，
2隆豹、添加scss預(yù)處理椭岩，處理css樣式文件，
第二期計劃實(shí)現(xiàn)功能:
1璃赡、處理相關(guān)圖片資源及根據(jù)圖片大小生成base64及url鏈接
2判哥、添加相關(guān)字體庫圖標(biāo)
3、引入element-ui第三方UI庫以及按需加載其相關(guān)組件
