本篇內(nèi)容主要講解“vue-automation是什么”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實用性強。下面就讓小編來帶大家學習“vue-automation是什么”吧!
10年積累的成都網(wǎng)站設(shè)計、網(wǎng)站建設(shè)經(jīng)驗,可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認識你,你也不認識我。但先網(wǎng)站設(shè)計后付款的網(wǎng)站建設(shè)流程,更有吐魯番免費網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。
vue-automation 是一款開箱即用的 Vue 項目模版,它基于 Vue CLI 4
眾所周知,雖然 Vue CLI 提供了腳手架的功能,但由于官方的腳手架過于簡單,運用在實際項目開發(fā)上的時候,我們還需要做很多事情,而 vue-automation 就是來解決這一痛點,讓你的開發(fā)效率至少提升 50% 以上。
默認集成 vue-router 、vuex 和 axios
全局 SCSS 資源自動引入
全局組件自動注冊
支持 SVG 圖標,CSS 精靈圖自動合成
支持 mock 數(shù)據(jù),可擺脫后端束縛獨立開發(fā)
支持 GZip 和 cdn 優(yōu)化項目體積/加載速度
結(jié)合 IDE 插件、ESlint 、stylelint 、Git 鉤子,輕松實現(xiàn)團隊代碼規(guī)范
默認提供開發(fā)環(huán)境和生產(chǎn)環(huán)境兩套配置,分別在根目錄下 .env.development
和 .env.production
文件里,可配置項有網(wǎng)站標題、接口請求地址和是否開啟CDN支持。
開發(fā)者可根據(jù)實際業(yè)務(wù)需求進行擴展,如果對這塊不熟悉,可閱讀 Vue CLI 環(huán)境變量和模式 章節(jié)。
全局 SCSS 資源并不是全局樣式,是變量、@mixin 、@function 這些東西
在 assets/styles/resources/
目錄下存放全局的 SCSS 資源,也就是說在這個目錄里的文件,無需在頁面上引用即可生效并使用。
項目中默認存放了 utils.scss
文件,里面有幾個 @mixin
和 %
,你可以嘗試在頁面中使用它們看看效果。
同樣,精靈圖目錄下生成的 SCSS 資源也是全局可調(diào)用的。
又稱雪碧圖,原理是將多張小圖合并到一張大圖上,以便減少 HTTP 請求,提高網(wǎng)站訪問速度。
精靈圖原始圖片的存放位置位于 assets/sprites/
目錄下,注意按文件夾區(qū)分。
項目運行前會根據(jù)文件夾生成對應(yīng)的精靈圖文件(精靈圖圖片和 .scss
文件),多個文件夾則會生成多個精靈圖文件。需要注意的是,在項目運行時,修改文件夾里的圖片,會重新生成相關(guān)精靈圖文件,但如果新建文件夾,則需要重新運行項目才會生成對應(yīng)精靈圖文件。
在 .vue
文件中可通過 @include
直接使用精靈圖,無需手動引入 .scss
文件:
// 方法 1 // @include [文件夾名稱]-sprite([文件名稱]); .icon { @include example-sprite(address); } // 方法 2 // @include all-[文件夾名稱]-sprites; @include all-example-sprites;
最終輸出如下:
/* 方法 1 */ .icon { background-image: url(img/example.326b35aec20837b9c08563c654422fe6.326b35ae.png); background-position: 0px 0px; background-size: 210px 210px; width: 100px; height: 100px; } /* 方法 2 */ .example-address-sprites { background-image: url(img/example.326b35aec20837b9c08563c654422fe6.326b35ae.png); background-position: 0 0; background-size: 210px 210px; width: 100px; height: 100px; } .example-feedback-sprites { background-image: url(img/example.326b35aec20837b9c08563c654422fe6.326b35ae.png); background-position: -110px 0; background-size: 210px 210px; width: 100px; height: 100px; } .example-payment-sprites { background-image: url(img/example.326b35aec20837b9c08563c654422fe6.326b35ae.png); background-position: 0 -110px; background-size: 210px 210px; width: 100px; height: 100px; }
如果是小型項目,靜態(tài)圖標不多,可全部放在一個文件夾內(nèi);如果是中大型項目,文件夾可按模塊來劃分,這樣不同的模塊最終會生成各自的精靈圖文件。
現(xiàn)在越來越多項目開始使用 SVG 圖標做為精靈圖的替代品,本框架也提供了 SVG 圖標支持,方便使用。推薦去 阿里巴巴矢量圖標庫 下載高質(zhì)量 SVG 圖標
首先將 svg 文件放到 src/assets/icons/
目錄下,然后在頁面中就可以使用了, name
就是 svg 文件名
<svg-icon name="example" />
<svg-icon />
組件為全局組件,所以無需注冊即可使用
全局組件存放在 components/global/
目錄下,需要注意各個組件按文件夾區(qū)分。
每個組件的文件夾內(nèi)至少保留一個文件名為 index
的組件入口,例如 index.vue
。
組件必須設(shè)置 name
并保證其唯一,自動注冊會將組件的 name
設(shè)為組件名,可參考 SvgIcon 組件寫法。
雖然文件夾名稱和 name
無關(guān)聯(lián),但建議與 name
保持一致。
如果組件是通過 js 進行調(diào)用,則確保組件入口文件為 index.js
,可參考 ExampleNotice 組件。
路由也實現(xiàn)了自動注冊,但因為有優(yōu)先級的概念,先定義的會先匹配,所以同一模塊下的路由需要放在一個路由配置文件里。
開發(fā)者只需關(guān)心 router/modules/
目錄下的文件,一個模塊對應(yīng)一個 .js
文件,可參考 router/modules/example.js
文件。
Vuex 同樣實現(xiàn)了自動注冊,開發(fā)只需關(guān)注 store/modules/
文件夾里的文件即可,同樣也按照模塊區(qū)分文件。
新建模版:
// example.js const state = {} const getters = {} const actions = {} const mutations = {} export default { namespaced: true, state, actions, getters, mutations }
文件默認開啟命名空間,文件名會默認注冊為模塊名。
使用方法:
this.$store.state.example.xxx; this.$store.getters['example/xxx']; this.$store.dispatch('example/xxx'); this.$store.commit('example/xxx');
攔截器的用處就是攔截每一次的請求和響應(yīng),然后做一些全局的處理。
例如接口響應(yīng)報錯,可以在攔截器里用統(tǒng)一的報錯提示來展示,方便業(yè)務(wù)開發(fā)。
本框架提供了一份攔截器參考代碼 src/api/index.js
,因為每個公司提供的接口標準不同,所以該文件需要開發(fā)者根據(jù)各自公司的接口去定制對應(yīng)的攔截器。
代碼很簡單,首先初始化 axios
對象,然后 axios.interceptors.request.use()
和 axios.interceptors.response.use()
就分別是請求和響應(yīng)的攔截代碼了。
參考代碼里只做了簡單的攔截處理,例如請求的時候會自動帶上 token
,響應(yīng)的時候會根據(jù)錯誤信息判斷是登錄失效還是接口報錯。
該功能基于 plop 實現(xiàn)。
開發(fā)過程中,避免不了手動去頻繁創(chuàng)建頁面、組件等文件,并且還要在文件里寫一些必要的代碼,是不是覺得很麻煩?現(xiàn)在你可以用更簡潔的方式來處理這一切。
模版默認提供了 page(頁面/布局) 、component(組件) 、store(全局狀態(tài)) 三個模版文件,通過 yarn new
指令可以自行選擇。
在實際項目開發(fā)中,建議根據(jù)項目定制適合項目的模版文件,可以大大提高開發(fā)效率,當多人協(xié)作開發(fā)時,也能統(tǒng)一部分標準。
模版目錄為 ./plop-templates/
,如果是新建模版,記得在項目根目錄 plopfile.js
里引用一下。
為保證代碼風格統(tǒng)一,統(tǒng)一使用 VS Code 做為開發(fā) IDE ,并安裝以下擴展:
EditorConfig for VS Code
ESLint
Vetur
Prettier - Code formatter
stylelint
安裝完后在 settings.json
中增加如下配置:
"editor.codeActionsOnSave": { "source.fixAll.eslint": true, "source.fixAll.stylelint": true }
最終效果為,在保存時,會自動對當前文件進行代碼格式化操作。
上述操作僅對代碼的寫法規(guī)范進行格式化,例如縮進、空格、結(jié)尾的分號等。
而在提交代碼時, Git 的鉤子會檢查代碼中是否有錯誤,這些錯誤是 IDE 無法自動修復的,例如出現(xiàn)未使用過的變量。如果有錯誤,則會取消此次提交,直到開發(fā)者修復完所有錯誤后才允許提交成功,確保倉庫里的代碼絕對正確。
可通過修改 .eslintignore
和 .stylelintignore
忽略無需做代碼規(guī)范的文件,例如在項目中引用了一些第三方的插件或組件,我們就可以將其忽略
如果 git init
倉庫初始化是在依賴包安裝之后執(zhí)行的,則無法初始化 Git 鉤子,建議在 git init
之后再執(zhí)行一遍 yarn
或者 npm i
,重新安裝一遍依賴包。
配置文件主要有 3 處,分別為 IDE 配置( .editorconfig
)、ESLint 配置( .eslintrc.js
和 .eslintignore
)、StyleLint 配置( .stylelintrc
和 .stylelintignore
)。
以代碼縮進舉例,本模版默認是以 4 空格進行縮進,如果要調(diào)整為 2 空格,則需要在 .editorconfig
里修改:
indent_size = 2
在 .eslintrc.js
里修改:
'indent': [2, 2, { 'SwitchCase': 1 }], ... 'vue/html-indent': [2, 2], ... 'vue/script-indent': [2, 2, { 'switchCase': 1 }]
在 .stylelintrc
里修改:
"indentation": 2
修改完畢后,再分別執(zhí)行下面兩句命令:
yarn run lint yarn run stylelint
該操作會將代碼進行一次格式校驗,如果規(guī)則支持自動修復,則會將不符合規(guī)則的代碼自動進行格式化。
以上面的例子,當縮進規(guī)則調(diào)整后,我們無需手動去每個文件調(diào)整,通過命令可以自動應(yīng)用新的縮進規(guī)則。
除了以上常用功能介紹外, vue-automation 還支持 mock 、CDN 、GZip 和移動端等相關(guān)配置,方便適應(yīng)任何開發(fā)場景,真正做到了開箱即用。
在我目前所在的公司里, vue-automation 已經(jīng)穩(wěn)定用于數(shù)十個真實項目上,覆蓋企業(yè)官網(wǎng)、商城、數(shù)字大屏、微信公眾號等多個不同領(lǐng)域。
同時在其基礎(chǔ)上,擴展開發(fā)出了一套獨立的 中后臺系統(tǒng)框架 : Fantastic-admin ,在易用的基礎(chǔ)上保證了功能全面,超越市面上大部分同類框架。
到此,相信大家對“vue-automation是什么”有了更深的了解,不妨來實際操作一番吧!這里是創(chuàng)新互聯(lián)網(wǎng)站,更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢,關(guān)注我們,繼續(xù)學習!
網(wǎng)頁題目:vue-automation是什么
轉(zhuǎn)載源于:http://muchs.cn/article48/gdegep.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供域名注冊、網(wǎng)站營銷、網(wǎng)站改版、電子商務(wù)、搜索引擎優(yōu)化、網(wǎng)站內(nèi)鏈
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)