readme
Showing
5 changed files
with
145 additions
and
36 deletions
1 | // https://github.com/michael-ciniawsky/postcss-load-config | 1 | // https://github.com/michael-ciniawsky/postcss-load-config |
2 | module.exports = { | 2 | module.exports = { |
3 | plugins: { | 3 | plugins: { |
4 | autoprefixer: { | 4 | autoprefixer: { |
5 | overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8'] | 5 | overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8'] |
6 | }, | 6 | }, |
7 | 'postcss-pxtorem': { | 7 | 'postcss-pxtorem': { |
8 | rootValue: 37.5, | 8 | rootValue: 37.5, |
9 | propList: ['*'] | 9 | propList: ['*'], |
10 | } | 10 | //selectorBlackList: ['van-'] |
11 | } | 11 | } |
12 | } | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
12 | } | ||
13 | } | ... | ... |
... | @@ -21,9 +21,8 @@ | ... | @@ -21,9 +21,8 @@ |
21 | - [√ VantUI 组件按需加载](#vant) | 21 | - [√ VantUI 组件按需加载](#vant) |
22 | - [√ Sass](#sass) | 22 | - [√ Sass](#sass) |
23 | - [√ Webpack 4](#webpack) | 23 | - [√ Webpack 4](#webpack) |
24 | |||
25 | - [√ Vuex](#vuex) | 24 | - [√ Vuex](#vuex) |
26 | - [√ Axios 封装](#axios) | 25 | - [√ Axios 封装及接口管理](#axios) |
27 | - [√ Vue-router](#router) | 26 | - [√ Vue-router](#router) |
28 | - [√ vue.config.js 基础配置](#base) | 27 | - [√ vue.config.js 基础配置](#base) |
29 | - [√ vue.config.js 配置 proxy 跨域](#proxy) | 28 | - [√ vue.config.js 配置 proxy 跨域](#proxy) |
... | @@ -154,13 +153,23 @@ module.exports = { | ... | @@ -154,13 +153,23 @@ module.exports = { |
154 | 153 | ||
155 | 很多小伙伴会问我,适配的问题。 | 154 | 很多小伙伴会问我,适配的问题。 |
156 | 155 | ||
156 | 我们知道 `1rem` 等于`html` 根元素设定的 `font-size` 的 `px` 值。Vant UI 设置 `rootValue: 37.5`,你可以看到在 iPhone 6 下 看到 (`1rem 等于 37.5px`): | ||
157 | |||
158 | ```html | ||
159 | <html data-dpr="1" style="font-size: 37.5px;"></html> | ||
160 | ``` | ||
161 | 切换不同的机型,根元素可能会有不同的`font-size`。当你写css px 样式时,会被程序换算成 `rem` 达到适配。 | ||
162 | |||
163 | |||
164 | 因为我们用了Vant的组件,需要按照 `rootValue: 37.5` 来写样式。 | ||
165 | |||
157 | 举个例子:设计给了你一张 750px \* 1334px 图片,在 iPhone6 上铺满屏幕,其他机型适配。 | 166 | 举个例子:设计给了你一张 750px \* 1334px 图片,在 iPhone6 上铺满屏幕,其他机型适配。 |
158 | 167 | ||
159 | - 当`rootValue: 70` , 样式 `width: 750px;height: 1334px;` 图片会撑满 iPhone6 屏幕,这个时候切换其他机型,图片也会跟着撑 | 168 | - 当`rootValue: 70` , 样式 `width: 750px;height: 1334px;` 图片会撑满 iPhone6 屏幕,这个时候切换其他机型,图片也会跟着撑 |
160 | 满。 | 169 | 满。 |
161 | - 当`rootValue: 37.5` 的时候,样式 `width: 375px;height: 667px;` 图片会撑满 iPhone6 屏幕。 | 170 | - 当`rootValue: 37.5` 的时候,样式 `width: 375px;height: 667px;` 图片会撑满 iPhone6 屏幕。 |
162 | 171 | ||
163 | 本案例采用 Vant 是基于 375 设计稿 , rootValue: 37.5。其他的你就可以根据你设计图,去做对应的设置了。 | 172 | 也就是iphone 6 下 375px宽度写CSS。其他的你就可以根据你设计图,去写对应的样式就可以了。 |
164 | 173 | ||
165 | 当然,想要撑满屏幕你可以使用 100%,这里只是举例说明。 | 174 | 当然,想要撑满屏幕你可以使用 100%,这里只是举例说明。 |
166 | 175 | ||
... | @@ -317,6 +326,101 @@ export default createRouter() | ... | @@ -317,6 +326,101 @@ export default createRouter() |
317 | 326 | ||
318 | [▲ 回顶部](#top) | 327 | [▲ 回顶部](#top) |
319 | 328 | ||
329 | ### <span id="axios">✅ Axios 封装及接口管理</span> | ||
330 | |||
331 | `utils/request.js` 封装 axios ,开发者需要根据后台接口做修改。 | ||
332 | |||
333 | - `service.interceptors.request.use` 里可以设置请求头,比如设置 `token` | ||
334 | - `config.hideloading` 是在 api 文件夹下的接口参数里设置,下文会讲 | ||
335 | - `service.interceptors.response.use` 里可以对接口返回数据处理,比如 401 删除本地信息,重新登录 | ||
336 | |||
337 | ```javascript | ||
338 | import axios from 'axios' | ||
339 | import store from '@/store' | ||
340 | import {Toast} from 'vant' | ||
341 | // 根据环境不同引入不同api地址 | ||
342 | import {baseApi} from '@/config' | ||
343 | // create an axios instance | ||
344 | const service = axios.create({ | ||
345 | baseURL: baseApi, // url = base api url + request url | ||
346 | withCredentials: true, // send cookies when cross-domain requests | ||
347 | timeout: 5000 // request timeout | ||
348 | }) | ||
349 | |||
350 | // request 拦截器 request interceptor | ||
351 | service.interceptors.request.use( | ||
352 | config => { | ||
353 | // 不传递默认开启loading | ||
354 | if (!config.hideloading) { | ||
355 | // loading | ||
356 | Toast.loading({ | ||
357 | forbidClick: true | ||
358 | }) | ||
359 | } | ||
360 | if (store.getters.token) { | ||
361 | config.headers['X-Token'] = '' | ||
362 | } | ||
363 | return config | ||
364 | }, | ||
365 | error => { | ||
366 | // do something with request error | ||
367 | console.log(error) // for debug | ||
368 | return Promise.reject(error) | ||
369 | } | ||
370 | ) | ||
371 | // respone拦截器 | ||
372 | service.interceptors.response.use( | ||
373 | response => { | ||
374 | Toast.clear() | ||
375 | const res = response.data | ||
376 | if (res.status && res.status !== 200) { | ||
377 | // 登录超时,重新登录 | ||
378 | if (res.status === 401) { | ||
379 | store.dispatch('FedLogOut').then(() => { | ||
380 | location.reload() | ||
381 | }) | ||
382 | } | ||
383 | return Promise.reject(res || 'error') | ||
384 | } else { | ||
385 | return Promise.resolve(res) | ||
386 | } | ||
387 | }, | ||
388 | error => { | ||
389 | Toast.clear() | ||
390 | console.log('err' + error) // for debug | ||
391 | return Promise.reject(error) | ||
392 | } | ||
393 | ) | ||
394 | export default service | ||
395 | ``` | ||
396 | |||
397 | 在`src/api` 文件夹下统一管理接口 | ||
398 | |||
399 | - 你可以建立多个模块对接接口, 比如 `home.js` 里是首页的接口这里讲解 `user.js` | ||
400 | - `url` 接口地址,请求的时候会拼接上 `config` 下的 `baseApi` | ||
401 | - `method` 请求方法 | ||
402 | - `data` 请求参数 `qs.stringify(params)` 是对数据系列化操作 | ||
403 | - `hideloading` 默认 `false`,设置为 `true` 后,不显示loading ui 交互中有些接口不需要样用户感知 | ||
404 | |||
405 | ```javascript | ||
406 | import qs from 'qs' | ||
407 | // axios | ||
408 | import request from '@/utils/request' | ||
409 | //user api | ||
410 | |||
411 | // 登录 | ||
412 | export function login(params) { | ||
413 | return request({ | ||
414 | url: '/user/login', // 接口地址 | ||
415 | method: 'post', // method | ||
416 | data: qs.stringify(params) | ||
417 | // hideloading: true | ||
418 | }) | ||
419 | } | ||
420 | ``` | ||
421 | |||
422 | [▲ 回顶部](#top) | ||
423 | |||
320 | ### <span id="base">✅ vue.config.js 基础配置 </span> | 424 | ### <span id="base">✅ vue.config.js 基础配置 </span> |
321 | 425 | ||
322 | 如果你的 `Vue Router` 模式是 hash | 426 | 如果你的 `Vue Router` 模式是 hash |
... | @@ -358,6 +462,10 @@ module.exports = { | ... | @@ -358,6 +462,10 @@ module.exports = { |
358 | 462 | ||
359 | ### <span id="proxy">✅ vue.config.js 配置 proxy 跨域 </span> | 463 | ### <span id="proxy">✅ vue.config.js 配置 proxy 跨域 </span> |
360 | 464 | ||
465 | 如果你的项目需要跨域设置,你需要打来 `vue.config.js` `proxy` 注释 并且配置相应参数 | ||
466 | |||
467 | **注意**:你还需要将 `src/config/env.development.js` 里的 `baseApi` 设置成 '/' | ||
468 | |||
361 | ```javascript | 469 | ```javascript |
362 | module.exports = { | 470 | module.exports = { |
363 | devServer: { | 471 | devServer: { |
... | @@ -366,7 +474,7 @@ module.exports = { | ... | @@ -366,7 +474,7 @@ module.exports = { |
366 | //配置跨域 | 474 | //配置跨域 |
367 | '/api': { | 475 | '/api': { |
368 | target: 'https://test.xxx.com', // 接口的域名 | 476 | target: 'https://test.xxx.com', // 接口的域名 |
369 | ws: true, // 是否启用websockets | 477 | // ws: true, // 是否启用websockets |
370 | changOrigin: true, // 开启代理,在本地创建一个虚拟服务端 | 478 | changOrigin: true, // 开启代理,在本地创建一个虚拟服务端 |
371 | pathRewrite: { | 479 | pathRewrite: { |
372 | '^/api': '/' | 480 | '^/api': '/' |
... | @@ -377,33 +485,25 @@ module.exports = { | ... | @@ -377,33 +485,25 @@ module.exports = { |
377 | } | 485 | } |
378 | ``` | 486 | ``` |
379 | 487 | ||
380 | 使用 | 488 | 使用 例如: `src/api/home.js` |
381 | 489 | ||
382 | ```javascript | 490 | ```javascript |
383 | <script> | 491 | |
384 | import axios from "axios" | 492 | export function getUserInfo(params) { |
385 | export default { | 493 | return request({ |
386 | mounted() { | 494 | url: '/api/userinfo', |
387 | axios.get("/api/1").then(res => { | 495 | method: 'get', |
388 | }); | 496 | data: qs.stringify(params) |
389 | } | 497 | }) |
390 | }; | 498 | } |
391 | </script> | 499 | |
392 | ``` | 500 | ``` |
393 | 501 | ||
394 | [▲ 回顶部](#top) | 502 | [▲ 回顶部](#top) |
395 | 503 | ||
396 | ### <span id="proxy">✅ vue.config.js 配置 proxy 跨域 </span> | 504 | ### <span id="proxy">✅ vue.config.js 配置 proxy 跨域 </span> |
397 | 505 | ||
398 | ```javascript | 506 | |
399 | publicPath: './', // 署应用包时的基本 URL router hash 模式使用 | ||
400 | // publicPath: process.env.NODE_ENV === 'development' ? '/' : '/app/', //router history模式使用 需要区分生产环境和开发环境,不然build会报错 | ||
401 | outputDir: 'dist', // 生产环境构建文件的目录 | ||
402 | assetsDir: 'static', // outputDir的静态资源(js、css、img、fonts)目录 | ||
403 | lintOnSave: false, | ||
404 | productionSourceMap: !IS_PROD, // 生产环境的 source map | ||
405 | ``` | ||
406 | |||
407 | [▲ 回顶部](#top) | 507 | [▲ 回顶部](#top) |
408 | 508 | ||
409 | #### 总结 | 509 | #### 总结 | ... | ... |
src/api/home.js
0 → 100644
1 | import qs from 'qs' | 1 | import qs from 'qs' |
2 | // axios | ||
2 | import request from '@/utils/request' | 3 | import request from '@/utils/request' |
3 | // api | 4 | //user api |
4 | 5 | ||
5 | // 登录 | 6 | // 登录 |
6 | export function login(params) { | 7 | export function login(params) { |
7 | return request({ | 8 | return request({ |
8 | url: '/user/login', | 9 | url: '/user/login', |
9 | method: 'post', | 10 | method: 'post', |
10 | data: qs.stringify(params) | 11 | data: qs.stringify(params), |
12 | // hideloading: true | ||
11 | }) | 13 | }) |
12 | } | 14 | } |
13 | // 用户信息 | 15 | // 用户信息 | ... | ... |
... | @@ -48,12 +48,12 @@ module.exports = { | ... | @@ -48,12 +48,12 @@ module.exports = { |
48 | // 当出现编译器错误或警告时,在浏览器中显示全屏覆盖层 | 48 | // 当出现编译器错误或警告时,在浏览器中显示全屏覆盖层 |
49 | warnings: false, | 49 | warnings: false, |
50 | errors: true | 50 | errors: true |
51 | } | 51 | }, |
52 | // proxy: { | 52 | // proxy: { |
53 | // //配置跨域 | 53 | // //配置跨域 |
54 | // '/api': { | 54 | // '/api': { |
55 | // target: "https://test.xxx.com", | 55 | // target: "https://test.xxx.com", |
56 | // ws:true, | 56 | // // ws:true, |
57 | // changOrigin:true, | 57 | // changOrigin:true, |
58 | // pathRewrite:{ | 58 | // pathRewrite:{ |
59 | // '^/api':'/' | 59 | // '^/api':'/' | ... | ... |
-
Please register or sign in to post a comment