資訊專欄INFORMATION COLUMN
摘要：寫在前面使用框架開發(fā)時，很多人會選擇官方提供的腳手架，最新的已經(jīng)更新到完全無配置，只需下載就能方便的使用構(gòu)建的項目工程，但基礎(chǔ)的并不能滿足正常的項目開發(fā)，在開發(fā)中我們需要根據(jù)自己的習(xí)慣和業(yè)務(wù)功能而添加些基礎(chǔ)功能。
寫在前面
使用vue框架開發(fā)時，很多人會選擇vue官方提供的cli腳手架，最新的cli已經(jīng)更新到3.0完全無配置，只需下載就能方便的使用vuecli構(gòu)建的項目工程，但基礎(chǔ)的cli并不能滿足正常的項目開發(fā)，在開發(fā)中我們需要根據(jù)自己的習(xí)慣和業(yè)務(wù)功能而添加些基礎(chǔ)功能。
我在vuec-li3的基礎(chǔ)之上重新做了些構(gòu)建，分為pc，移動兩版，主要區(qū)別是移動版添加了分辨率適配，本項目為空白版，拿來即用，省卻每次手動構(gòu)建項目工程??！
GitHub查看項目內(nèi)容 https://github.com/wwenj/vueC...
PCpc版安裝了elementUI做統(tǒng)一UI展示
安裝scss寫樣式
移動移動端適配：本項目使用vw單位統(tǒng)一對分辨率做適配，在vuecli工程里，根據(jù)大漠的《如何在Vue項目中使用vw實現(xiàn)移動端適配》用webpack中做配置。
基礎(chǔ)配置svg組件：
文件在src/icons/中，組件在component公共組件中封裝用于svg展示組件，用做小icon的展示，svg保存在icons/下，使用時組件中調(diào)用
css樣式：
在src/style/中，全局公共樣式，初始化樣式。
路由與vuex
對vue router和vuex做了相同的模塊化處理，在router/和store/中統(tǒng)一寫路由和vuex相關(guān)信息，可按功能分模塊引入
請求攔截與封裝
使用axios做請求，在src/request/http.js中做了封裝，用axios攔截器對請求和響應(yīng)做統(tǒng)一攔截，處理每次請求的token信息或者響應(yīng)狀態(tài)碼
對axios請求進(jìn)行簡單封裝get，post請求，統(tǒng)一傳參，響應(yīng)后傳回一個promise對象，在src/request/api.js中將每個接口封裝，對外暴露請求改接口的方法名，返回一個promise，組件中直接調(diào)用api.js中的方法名即可
工具類
在src/utils/中，對常用枚舉值、全局組件注冊、常用類功能模塊做模塊化封裝
vue.config.js
vuecli3隱藏所有配置，添加新配置項目中新建vue.config.js文件，本項目在其中加了一些常用配置，文件夾的別名，代理，打包路徑等
Eslint
eslint使用默認(rèn)規(guī)則，在vscode編輯器中配合eslint插件的保存自動修復(fù)功能，每次保存后會按照eslit規(guī)則自動修復(fù)
目錄結(jié)構(gòu)
src/views文件下寫業(yè)務(wù)模塊，src/components寫公共基礎(chǔ)組件
寫在結(jié)尾本項目只是根據(jù)自己開發(fā)習(xí)慣整理的一套基于vuecli3的重新構(gòu)建項目，為了讓開發(fā)更方便，清晰，每次寫新項目，個人項目，寫demo下載即用，比較方便，如有問題歡迎指教
GitHub查看項目內(nèi)容 https://github.com/wwenj/vueC...
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/106380.html
摘要：但高度封裝的帶來方便的同時，很多人卻很少去關(guān)注輪子的內(nèi)部結(jié)構(gòu)，以至于當(dāng)使用需要手動配置一些東西如編譯實現(xiàn)代碼壓縮，移動端適配等配置的時候往往無從下手。廢話不多說，下面我們來看看如何基于模仿實現(xiàn)項目工程化。 從零搭建vue-cli 原創(chuàng)不易，如需轉(zhuǎn)載請聯(lián)系作者并注明出處 vue-cli的出現(xiàn)為vue工程化前端開發(fā)工作流提供了開箱即用的構(gòu)建配置，減輕了煩人的webpack配置流程。但高度封...
摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。 蘇...
摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。 蘇...
摘要：比如傳遞給時，使用。為所有的及其預(yù)處理文件開啟。在生產(chǎn)環(huán)境下為和使用在多核機(jī)器下會默認(rèn)開啟。是否使用分割供應(yīng)的包也可以是一個在包中引入的依賴的顯性的數(shù)組。查閱配置行為。 之前因為parcel的出現(xiàn)，webpack也跟進(jìn)了零配置vue-cli自然也不能落下,cli3.0也升級到webpack4，并增加許多新特性 安裝并創(chuàng)建一個項目 支持npm和yarn npm install -g @v...
閱讀 4393·2021-10-13 09:39
閱讀 510·2021-09-06 15:02
閱讀 3254·2019-08-30 15:53
閱讀 1067·2019-08-30 13:04
閱讀 2126·2019-08-30 11:27
閱讀 2039·2019-08-26 13:51
閱讀 2129·2019-08-26 11:33
閱讀 2927·2019-08-26 10:36
