常用目錄別名
vant/rem適配
scss支援、_mixin.scss、_variables.scss
頁面切換動畫+keepalive
頁面標題
自動註冊：自動註冊路由表/自動註冊vuex/svg圖示引入
mock server
axios封裝、api管理
使用者鑑權
vuex-loading
vo-pages/dayjs/vconsole
生產環境優化
按照vant官網推薦自動按需引入元件，同樣，vant官網中也有對rem適配的推薦配置，按照官網說明的使用。需要注意的是postcss的配置中，autoprefixer下的browsers需要替換成overridebrowserslist
選擇scss作為css預處理，並對mixin、variables、common.scss作全域性引入。
css:
}}
// vuex中
state:
,mutations:},
>
"transitionname"
>
"$route.meta.keepalive"
>
="router"
>
<
/router-view>
<
/keep-alive>
="router" v-
else
>
<
/router-view>
<
/transition>
<
/div>
<
/template>
vue-router的beforeeach註冊乙個前置守衛使用者獲取到頁面配置的title
// get-page-title.js
import defaultsettings from
'@/settings'
const title = defaultsettings.title ||
'h5vue'
export
default
function
getpagetitle
(pagetitle)- $
` }
return`$
`}// permission.js
router.
beforeeach
((to,
from
, next)
=>
require.context():
你可以通過上面的是官網原話，可能你跟我一樣沒太看懂，說白了，他可以用來匯入模組。require.context()函式來建立自己的 context。可以給這個函式傳入三個引數：乙個要搜尋的目錄，乙個標記表示是否還搜尋其子目錄， 以及乙個匹配檔案的正規表示式。
webpack 會在構建中解析**中的
require.context()。
來看一下如何使用，我的router下的檔案結構是這樣的：
// 利用require.context()自動引入article.js和user.js
const routercontext = require.
context
('./'
,true
,/\.js$/
)routercontext.
keys()
.foreach
(route =>
const routermodule =
routercontext
(route)
/** * 相容 import export 和 require module.export 兩種規範
*/routes = routes.
concat
(routermodule.
default
|| routermodule)
})
對於vuex也同樣引入，記得把引入的vuex按照檔名註冊為對應的模組中。
mock server部分可直接參看vue-element-admin的mock方案
axios部分，配置了baseurl、超時時間，利用***對header新增了使用者的token，方便下一步的使用者鑑權，並對錯誤做了toast提示。具體錯誤的code需要視各業務而定，本專案只做為示例參考。
在vue-router的beforeeach中，新增使用者鑑權功能。當使用者登入後使用cookie持續化儲存使用者token，並賦值到vuex，後續可利用token獲取使用者資訊。
在vuex3.1.0中對vuex.subscribeaction做了改動，使其擁有了before/after鉤子函式。
// subscribeaction官網示例
store.
subscribeaction(`)
},after:
(action, state)
=>`)}
})
vuex的外掛程式功能，實現對應action的狀態監聽也不再是難題。
// 使用方法
computed: )
}// 其中 test對應的是vuex中的模組名，oneplusaction對應模組內的actions
通用庫改用cdn
關閉sourcemap防止原始碼洩露
醜化html/css/js
生成gzip
移除掉debugger/console
利用webpack-bundle-analyzer做資源分析，提供進一步優化的資料分析
h5 開發環境搭建
1 在使用瀏覽器進行除錯的時候經常會出現埠占用的情況，使用命令 sudo lsof i 3000這個命令是檢視埠3000 的使用情況，當埠有比較多的時候，通過這個命令看埠的使用情況 通過sudo kill 9 41769當我看到3000 埠的占用的執行緒id，使用這個命令去殺死埠，41769 就是佔...
H5前端基礎 布局
浮動 使用float來設定元素浮動 可選值 none 預設值，不浮動，元素在文件流中 left 元素向左浮動 right 元素向右浮動 特點 1.元素浮動以後會完全脫離文件流 2.浮動以後元素會一直向父元素的最上方移動 3.直到遇到父元素的邊框或者其他的浮動元素，會停止移動 4.如果浮動元素的上邊是...
H5實踐（2） H5輔助開發環境搭建
做h5遊戲開發時，通常都會遇到些問題。這裡總結下本人開發過程中遇到的 下面，對於每小點，依次詳細解釋之。很久以前的js程式設計是不支援模組化程式設計的。即類似require module之類的概念是沒有的。現在主流的，都會使用npm nodejs。為了在網頁上可以使用require，則必須使用 we...