@@ -73,6 +73,7 @@ vue-h5-template
7373* [ 使用 mock 数据] ( #mock )
7474* [ axios 封装及接口拦截] ( #axios )
7575* [ vue-router] ( #router )
76+ * [ 本地存储 storage 封装] ( #storage )
7677
7778### <span id =" env " >⚙️ 环境变量配置</span >
7879
@@ -163,6 +164,8 @@ setup () {
163164
164165> rem(font size of the root element)是css3新增的一个相对单位,是指相对于根元素的字体大小的单位
165166
167+ - 手动rem适配
168+
166169``` html
167170<script >
168171 function setRem () {
@@ -176,6 +179,39 @@ setup () {
176179 </script >
177180```
178181
182+ - 使用postcss插件rem适配
183+
184+ [ postcss-pxtorem] ( https://github.com/cuth/postcss-pxtorem ) 是一款 postcss 插件,用于将 px 单位转化为 rem 单位
185+ [ amfe-flexible] ( https://github.com/amfe/lib-flexible ) 用于设置 rem 基准值
186+
187+ ``` bash
188+ npm i amfe-flexible -S
189+ npm i postcss-pxtorem -D
190+ ```
191+
192+ 在项目根目录中,新建` postcss.config.js `
193+
194+ ``` javascript
195+ module .exports = {
196+ plugins: {
197+ autoprefixer: {
198+ browsers: ' last 5 version' ,
199+ overrideBrowserslist: [' Android 4.1' , ' iOS 7.1' , ' Chrome > 31' , ' ff > 31' , ' ie >= 8' ]
200+ },
201+ ' postcss-pxtorem' : {
202+ rootValue: 37.5 ,
203+ propList: [' *' ]
204+ }
205+ }
206+ }
207+ ```
208+
209+ 在` main.js ` 中引入` amfe-flexible `
210+
211+ ``` javascript
212+ import ' amfe-flexible/index.js'
213+ ```
214+
179215
180216[ 🔙返回顶部] ( #catalogue )
181217
@@ -579,7 +615,7 @@ mock请求的封装采用的是[vue-element-admin 的 mock 请求封装](https:/
579615 import store from ' @/store'
580616 import { Notify } from ' vant'
581617 import httpEnums from ' @/utils/httpEnums'
582- import { getToken } from ' @/utils/storage'
618+ import { getStorage } from ' @/utils/storage'
583619 import { getEnvValue } from ' @/utils/environment'
584620
585621 // create an axios instance
@@ -599,7 +635,7 @@ mock请求的封装采用的是[vue-element-admin 的 mock 请求封装](https:/
599635 service .interceptors .request .use (
600636 async config => {
601637 if (store .getters .token ) {
602- config .headers .Authorization = ` Bearer ${ getToken ( )} `
638+ config .headers .Authorization = ` Bearer ${ getStorage ( ' token ' )} `
603639 }
604640 return config
605641 },
@@ -758,6 +794,27 @@ router.beforeEach((to, from, next) => {
758794}
759795```
760796
797+ [ 🔙返回顶部] ( #catalogue )
798+
799+
800+ ### <span id =" storage " >本地存储 storage 封装</span >
801+
802+ 已做好 storage 封装,可直接使用
803+
804+ ``` javascript
805+ import { getStorage , setStorage , removeStorage } from ' @/utils/storage'
806+
807+ setup () {
808+ const token = getStorage (' token' )
809+ const userInfo = { name: ' zychooo' }
810+ setStorage (' user' , userInfo)
811+ removeStorage (' token' )
812+ }
813+ ```
814+
815+ [ 🔙返回顶部] ( #catalogue )
816+
817+
761818---
762819
763820# 鸣谢
0 commit comments