Skip to content

Commit 1b828b1

Browse files
committed
docs:更新readme
1 parent 0469200 commit 1b828b1

File tree

1 file changed

+59
-2
lines changed

1 file changed

+59
-2
lines changed

README.md

Lines changed: 59 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -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

Comments
 (0)