api
Showing
2 changed files
with
30 additions
and
14 deletions
... | @@ -53,8 +53,8 @@ | ... | @@ -53,8 +53,8 @@ |
53 | ##### 配置介绍 | 53 | ##### 配置介绍 |
54 | 54 | ||
55 |   以 `VUE_APP_` 开头的变量,在代码中可以通过 `process.env.VUE_APP_` 访问。 | 55 |   以 `VUE_APP_` 开头的变量,在代码中可以通过 `process.env.VUE_APP_` 访问。 |
56 |   比如,`VUE_APP_ENV = 'development'` 通过`process.env.VUE_APP_ENV` 访问 | 56 |   比如,`VUE_APP_ENV = 'development'` 通过`process.env.VUE_APP_ENV` 访问    除了 `VUE_APP_*` 变量之外 |
57 |    除了 `VUE_APP_*` 变量之外,在你的应用代码中始终可用的还有两个特殊的变量`NODE_ENV` 和`BASE_URL` | 57 | ,在你的应用代码中始终可用的还有两个特殊的变量`NODE_ENV` 和`BASE_URL` |
58 | 58 | ||
59 | 在项目根目录中新建.env | 59 | 在项目根目录中新建.env |
60 | 60 | ||
... | @@ -84,7 +84,10 @@ VUE_APP_ENV = 'production' | ... | @@ -84,7 +84,10 @@ VUE_APP_ENV = 'production' |
84 | ``` | 84 | ``` |
85 | 85 | ||
86 | 这里我们并没有定义很多变量,只定义了基础的 VUE_APP_ENV `development` `staging` `production` | 86 | 这里我们并没有定义很多变量,只定义了基础的 VUE_APP_ENV `development` `staging` `production` |
87 | 变量我们统一在 src/config/env.\*.js 里进行管理。修改起来方便,不需要重启项目,符合开发习惯。 | 87 | 变量我们统一在 `src/config/env.*.js` 里进行管理。 |
88 | |||
89 | 这里有个问题,既然这里有了根据不同环境设置变量的文件,为什么还要去 config 下新建三个对应的文件呢? **修改起来方便,不需 | ||
90 | 要重启项目,符合开发习惯。** | ||
88 | 91 | ||
89 | config/index.js | 92 | config/index.js |
90 | 93 | ||
... | @@ -151,15 +154,16 @@ module.exports = { | ... | @@ -151,15 +154,16 @@ module.exports = { |
151 | 154 | ||
152 | 很多小伙伴会问我,适配的问题。 | 155 | 很多小伙伴会问我,适配的问题。 |
153 | 156 | ||
154 | 我们知道 `1rem` 等于`html` 根元素设定的 `font-size` 的 `px` 值。Vant UI 设置 `rootValue: 37.5`,你可以看到在 iPhone 6 下 看到 (`1rem 等于 37.5px`): | 157 | 我们知道 `1rem` 等于`html` 根元素设定的 `font-size` 的 `px` 值。Vant UI 设置 `rootValue: 37.5`,你可以看到在 iPhone 6 下 |
158 | 看到 (`1rem 等于 37.5px`): | ||
155 | 159 | ||
156 | ```html | 160 | ```html |
157 | <html data-dpr="1" style="font-size: 37.5px;"></html> | 161 | <html data-dpr="1" style="font-size: 37.5px;"></html> |
158 | ``` | 162 | ``` |
159 | 切换不同的机型,根元素可能会有不同的`font-size`。当你写css px 样式时,会被程序换算成 `rem` 达到适配。 | ||
160 | 163 | ||
164 | 切换不同的机型,根元素可能会有不同的`font-size`。当你写 css px 样式时,会被程序换算成 `rem` 达到适配。 | ||
161 | 165 | ||
162 | 因为我们用了Vant的组件,需要按照 `rootValue: 37.5` 来写样式。 | 166 | 因为我们用了 Vant 的组件,需要按照 `rootValue: 37.5` 来写样式。 |
163 | 167 | ||
164 | 举个例子:设计给了你一张 750px \* 1334px 图片,在 iPhone6 上铺满屏幕,其他机型适配。 | 168 | 举个例子:设计给了你一张 750px \* 1334px 图片,在 iPhone6 上铺满屏幕,其他机型适配。 |
165 | 169 | ||
... | @@ -167,7 +171,7 @@ module.exports = { | ... | @@ -167,7 +171,7 @@ module.exports = { |
167 | 满。 | 171 | 满。 |
168 | - 当`rootValue: 37.5` 的时候,样式 `width: 375px;height: 667px;` 图片会撑满 iPhone6 屏幕。 | 172 | - 当`rootValue: 37.5` 的时候,样式 `width: 375px;height: 667px;` 图片会撑满 iPhone6 屏幕。 |
169 | 173 | ||
170 | 也就是iphone 6 下 375px宽度写CSS。其他的你就可以根据你设计图,去写对应的样式就可以了。 | 174 | 也就是 iphone 6 下 375px 宽度写 CSS。其他的你就可以根据你设计图,去写对应的样式就可以了。 |
171 | 175 | ||
172 | 当然,想要撑满屏幕你可以使用 100%,这里只是举例说明。 | 176 | 当然,想要撑满屏幕你可以使用 100%,这里只是举例说明。 |
173 | 177 | ||
... | @@ -392,13 +396,15 @@ service.interceptors.response.use( | ... | @@ -392,13 +396,15 @@ service.interceptors.response.use( |
392 | export default service | 396 | export default service |
393 | ``` | 397 | ``` |
394 | 398 | ||
399 | #### 接口管理 | ||
400 | |||
395 | 在`src/api` 文件夹下统一管理接口 | 401 | 在`src/api` 文件夹下统一管理接口 |
396 | 402 | ||
397 | - 你可以建立多个模块对接接口, 比如 `home.js` 里是首页的接口这里讲解 `user.js` | 403 | - 你可以建立多个模块对接接口, 比如 `home.js` 里是首页的接口这里讲解 `user.js` |
398 | - `url` 接口地址,请求的时候会拼接上 `config` 下的 `baseApi` | 404 | - `url` 接口地址,请求的时候会拼接上 `config` 下的 `baseApi` |
399 | - `method` 请求方法 | 405 | - `method` 请求方法 |
400 | - `data` 请求参数 `qs.stringify(params)` 是对数据系列化操作 | 406 | - `data` 请求参数 `qs.stringify(params)` 是对数据系列化操作 |
401 | - `hideloading` 默认 `false`,设置为 `true` 后,不显示loading ui 交互中有些接口不需要样用户感知 | 407 | - `hideloading` 默认 `false`,设置为 `true` 后,不显示 loading ui 交互中有些接口不需要样用户感知 |
402 | 408 | ||
403 | ```javascript | 409 | ```javascript |
404 | import qs from 'qs' | 410 | import qs from 'qs' |
... | @@ -417,6 +423,18 @@ export function login(params) { | ... | @@ -417,6 +423,18 @@ export function login(params) { |
417 | } | 423 | } |
418 | ``` | 424 | ``` |
419 | 425 | ||
426 | #### 如何调用 | ||
427 | |||
428 | ```javascript | ||
429 | // 请求接口 | ||
430 | import {getUserInfo} from '@/api/user.js' | ||
431 | |||
432 | const params = {user: 'sunnie'} | ||
433 | getUserInfo() | ||
434 | .then(() => {}) | ||
435 | .catch(() => {}) | ||
436 | ``` | ||
437 | |||
420 | [▲ 回顶部](#top) | 438 | [▲ 回顶部](#top) |
421 | 439 | ||
422 | ### <span id="base">✅ vue.config.js 基础配置 </span> | 440 | ### <span id="base">✅ vue.config.js 基础配置 </span> |
... | @@ -486,7 +504,6 @@ module.exports = { | ... | @@ -486,7 +504,6 @@ module.exports = { |
486 | 使用 例如: `src/api/home.js` | 504 | 使用 例如: `src/api/home.js` |
487 | 505 | ||
488 | ```javascript | 506 | ```javascript |
489 | |||
490 | export function getUserInfo(params) { | 507 | export function getUserInfo(params) { |
491 | return request({ | 508 | return request({ |
492 | url: '/api/userinfo', | 509 | url: '/api/userinfo', |
... | @@ -494,14 +511,12 @@ export function getUserInfo(params) { | ... | @@ -494,14 +511,12 @@ export function getUserInfo(params) { |
494 | data: qs.stringify(params) | 511 | data: qs.stringify(params) |
495 | }) | 512 | }) |
496 | } | 513 | } |
497 | |||
498 | ``` | 514 | ``` |
499 | 515 | ||
500 | [▲ 回顶部](#top) | 516 | [▲ 回顶部](#top) |
501 | 517 | ||
502 | ### <span id="proxy">✅ vue.config.js 配置 proxy 跨域 </span> | 518 | ### <span id="proxy">✅ vue.config.js 配置 proxy 跨域 </span> |
503 | 519 | ||
504 | |||
505 | [▲ 回顶部](#top) | 520 | [▲ 回顶部](#top) |
506 | 521 | ||
507 | #### 总结 | 522 | #### 总结 | ... | ... |
... | @@ -17,7 +17,7 @@ | ... | @@ -17,7 +17,7 @@ |
17 | 17 | ||
18 | <script> | 18 | <script> |
19 | // 请求接口 | 19 | // 请求接口 |
20 | import {getUserInfo} from '@/api/user.js' | 20 | import { getUserInfo } from '@/api/user.js' |
21 | export default { | 21 | export default { |
22 | components: {}, | 22 | components: {}, |
23 | 23 | ||
... | @@ -51,9 +51,10 @@ export default { | ... | @@ -51,9 +51,10 @@ export default { |
51 | // 请求数据案例 | 51 | // 请求数据案例 |
52 | initData() { | 52 | initData() { |
53 | // 请求接口数据,仅作为展示,需要配置src->config下环境文件 | 53 | // 请求接口数据,仅作为展示,需要配置src->config下环境文件 |
54 | const params = {user:'sunnie'} | ||
54 | getUserInfo() | 55 | getUserInfo() |
55 | .then(() => {}) | 56 | .then(() => { }) |
56 | .catch(() => {}) | 57 | .catch(() => { }) |
57 | }, | 58 | }, |
58 | onChange(index) { | 59 | onChange(index) { |
59 | if (index === 1) window.location.href = 'https://github.com/sunnie1992/vue-h5-template' | 60 | if (index === 1) window.location.href = 'https://github.com/sunnie1992/vue-h5-template' | ... | ... |
-
Please register or sign in to post a comment