亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

基于vue-cli3.0的項(xiàng)目工程重新構(gòu)建空白版，拿來即用

xingpingz / 2857人閱讀

摘要：寫在前面使用框架開發(fā)時(shí)，很多人會(huì)選擇官方提供的腳手架，最新的已經(jīng)更新到完全無配置，只需下載就能方便的使用構(gòu)建的項(xiàng)目工程，但基礎(chǔ)的并不能滿足正常的項(xiàng)目開發(fā)，在開發(fā)中我們需要根據(jù)自己的習(xí)慣和業(yè)務(wù)功能而添加些基礎(chǔ)功能。

寫在前面

使用vue框架開發(fā)時(shí)，很多人會(huì)選擇vue官方提供的cli腳手架，最新的cli已經(jīng)更新到3.0完全無配置，只需下載就能方便的使用vuecli構(gòu)建的項(xiàng)目工程，但基礎(chǔ)的cli并不能滿足正常的項(xiàng)目開發(fā)，在開發(fā)中我們需要根據(jù)自己的習(xí)慣和業(yè)務(wù)功能而添加些基礎(chǔ)功能。

我在vuec-li3的基礎(chǔ)之上重新做了些構(gòu)建，分為pc，移動(dòng)兩版，主要區(qū)別是移動(dòng)版添加了分辨率適配，本項(xiàng)目為空白版，拿來即用，省卻每次手動(dòng)構(gòu)建項(xiàng)目工程??！

GitHub查看項(xiàng)目內(nèi)容 https://github.com/wwenj/vueC...

PC

pc版安裝了elementUI做統(tǒng)一UI展示

安裝scss寫樣式

移動(dòng)

移動(dòng)端適配：本項(xiàng)目使用vw單位統(tǒng)一對(duì)分辨率做適配，在vuecli工程里，根據(jù)大漠的《如何在Vue項(xiàng)目中使用vw實(shí)現(xiàn)移動(dòng)端適配》用webpack中做配置。

基礎(chǔ)配置

svg組件：

文件在src/icons/中，組件在component公共組件中封裝用于svg展示組件，用做小icon的展示，svg保存在icons/下，使用時(shí)組件中調(diào)用即可

css樣式：

在src/style/中，全局公共樣式，初始化樣式。

路由與vuex

對(duì)vue router和vuex做了相同的模塊化處理，在router/和store/中統(tǒng)一寫路由和vuex相關(guān)信息，可按功能分模塊引入

請(qǐng)求攔截與封裝

使用axios做請(qǐng)求，在src/request/http.js中做了封裝，用axios攔截器對(duì)請(qǐng)求和響應(yīng)做統(tǒng)一攔截，處理每次請(qǐng)求的token信息或者響應(yīng)狀態(tài)碼

對(duì)axios請(qǐng)求進(jìn)行簡(jiǎn)單封裝get，post請(qǐng)求，統(tǒng)一傳參，響應(yīng)后傳回一個(gè)promise對(duì)象，在src/request/api.js中將每個(gè)接口封裝，對(duì)外暴露請(qǐng)求改接口的方法名，返回一個(gè)promise，組件中直接調(diào)用api.js中的方法名即可

工具類

在src/utils/中，對(duì)常用枚舉值、全局組件注冊(cè)、常用類功能模塊做模塊化封裝

vue.config.js

vuecli3隱藏所有配置，添加新配置項(xiàng)目中新建vue.config.js文件，本項(xiàng)目在其中加了一些常用配置，文件夾的別名，代理，打包路徑等

Eslint

eslint使用默認(rèn)規(guī)則，在vscode編輯器中配合eslint插件的保存自動(dòng)修復(fù)功能，每次保存后會(huì)按照eslit規(guī)則自動(dòng)修復(fù)

目錄結(jié)構(gòu)

src/views文件下寫業(yè)務(wù)模塊，src/components寫公共基礎(chǔ)組件

寫在結(jié)尾

本項(xiàng)目只是根據(jù)自己開發(fā)習(xí)慣整理的一套基于vuecli3的重新構(gòu)建項(xiàng)目，為了讓開發(fā)更方便，清晰，每次寫新項(xiàng)目，個(gè)人項(xiàng)目，寫demo下載即用，比較方便，如有問題歡迎指教

GitHub查看項(xiàng)目內(nèi)容 https://github.com/wwenj/vueC...

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/106380.html

相關(guān)文章

  • 基于webpack模仿vue-cli（簡(jiǎn)略版）工程化

    摘要：但高度封裝的帶來方便的同時(shí)，很多人卻很少去關(guān)注輪子的內(nèi)部結(jié)構(gòu)，以至于當(dāng)使用需要手動(dòng)配置一些東西如編譯實(shí)現(xiàn)代碼壓縮，移動(dòng)端適配等配置的時(shí)候往往無從下手。廢話不多說，下面我們來看看如何基于模仿實(shí)現(xiàn)項(xiàng)目工程化。 從零搭建vue-cli 原創(chuàng)不易，如需轉(zhuǎn)載請(qǐng)聯(lián)系作者并注明出處 vue-cli的出現(xiàn)為vue工程化前端開發(fā)工作流提供了開箱即用的構(gòu)建配置，減輕了煩人的webpack配置流程。但高度封...

    GitCafe 評(píng)論0 收藏0

  • 關(guān)于Vue2一些值得推薦的文章 -- 五、六月份

    摘要：五六月份推薦集合查看最新的請(qǐng)點(diǎn)擊集前端最近很火的框架資源定時(shí)更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢(mèng)入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請(qǐng)::點(diǎn)擊::集web前端最近很火的vue2框架資源；定時(shí)更新，歡迎 Star 一下。 蘇...

    sutaking 評(píng)論0 收藏0

  • 關(guān)于Vue2一些值得推薦的文章 -- 五、六月份

    摘要：五六月份推薦集合查看最新的請(qǐng)點(diǎn)擊集前端最近很火的框架資源定時(shí)更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢(mèng)入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請(qǐng)::點(diǎn)擊::集web前端最近很火的vue2框架資源；定時(shí)更新，歡迎 Star 一下。 蘇...

    khs1994 評(píng)論0 收藏0

  • vue-cli3.0初體驗(yàn)～

    摘要：比如傳遞給時(shí)，使用。為所有的及其預(yù)處理文件開啟。在生產(chǎn)環(huán)境下為和使用在多核機(jī)器下會(huì)默認(rèn)開啟。是否使用分割供應(yīng)的包也可以是一個(gè)在包中引入的依賴的顯性的數(shù)組。查閱配置行為。 之前因?yàn)閜arcel的出現(xiàn)，webpack也跟進(jìn)了零配置vue-cli自然也不能落下,cli3.0也升級(jí)到webpack4，并增加許多新特性 安裝并創(chuàng)建一個(gè)項(xiàng)目 支持npm和yarn npm install -g @v...

    AlphaWallet 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<