JLNTV_IPD/vue-h5-template
4
0
Fork 0
mirror of https://github.com/sunniejs/vue-h5-template.git synced 2025-05-16 17:09:23 +08:00
Code Issues Projects Releases Wiki Activity

api

Browse Source
This commit is contained in:
sunnie 2020-04-17 18:03:46 +08:00
parent 3e329f7453
commit 4b1a42fbe7
2 changed files with 31 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
README.md
View File

@ -53,8 +53,8 @@
##### 配置介绍 ##### 配置介绍
  以 `VUE_APP_` 开头的变量，在代码中可以通过 `process.env.VUE_APP_` 访问。   以 `VUE_APP_` 开头的变量，在代码中可以通过 `process.env.VUE_APP_` 访问。
  比如,`VUE_APP_ENV = 'development'` 通过`process.env.VUE_APP_ENV` 访问   比如,`VUE_APP_ENV = 'development'` 通过`process.env.VUE_APP_ENV` 访问    除了 `VUE_APP_*` 变量之外
   除了 `VUE_APP_*` 变量之外，在你的应用代码中始终可用的还有两个特殊的变量`NODE_ENV` 和`BASE_URL` ，在你的应用代码中始终可用的还有两个特殊的变量`NODE_ENV` 和`BASE_URL`
在项目根目录中新建.env 在项目根目录中新建.env
@ -84,7 +84,10 @@ VUE_APP_ENV = 'production'
``` ```
这里我们并没有定义很多变量，只定义了基础的 VUE_APP_ENV `development` `staging` `production` 这里我们并没有定义很多变量，只定义了基础的 VUE_APP_ENV `development` `staging` `production`
变量我们统一在 src/config/env.\*.js 里进行管理。修改起来方便，不需要重启项目，符合开发习惯。 变量我们统一在 `src/config/env.*.js` 里进行管理。
这里有个问题，既然这里有了根据不同环境设置变量的文件，为什么还要去 config 下新建三个对应的文件呢？ **修改起来方便，不需
要重启项目，符合开发习惯。**
config/index.js config/index.js
@ -151,13 +154,14 @@ module.exports = {
很多小伙伴会问我，适配的问题。 很多小伙伴会问我，适配的问题。
我们知道 `1rem` 等于`html` 根元素设定的 `font-size` 的 `px` 值。Vant UI 设置 `rootValue: 37.5`,你可以看到在 iPhone 6 下 看到 （`1rem 等于 37.5px`）： 我们知道 `1rem` 等于`html` 根元素设定的 `font-size` 的 `px` 值。Vant UI 设置 `rootValue: 37.5`,你可以看到在 iPhone 6 下
看到 （`1rem 等于 37.5px`）：
```html ```html
<html data-dpr="1" style="font-size: 37.5px;"></html> <html data-dpr="1" style="font-size: 37.5px;"></html>
``` ```
切换不同的机型，根元素可能会有不同的`font-size`。当你写css px 样式时，会被程序换算成 `rem` 达到适配。
切换不同的机型，根元素可能会有不同的`font-size`。当你写 css px 样式时，会被程序换算成 `rem` 达到适配。
因为我们用了 Vant 的组件，需要按照 `rootValue: 37.5` 来写样式。 因为我们用了 Vant 的组件，需要按照 `rootValue: 37.5` 来写样式。
@ -392,6 +396,8 @@ service.interceptors.response.use(
export default service export default service
``` ```
#### 接口管理
在`src/api` 文件夹下统一管理接口 在`src/api` 文件夹下统一管理接口
- 你可以建立多个模块对接接口, 比如 `home.js` 里是首页的接口这里讲解 `user.js` - 你可以建立多个模块对接接口, 比如 `home.js` 里是首页的接口这里讲解 `user.js`
@ -417,6 +423,18 @@ export function login(params) {
} }
``` ```
#### 如何调用
```javascript
// 请求接口
import {getUserInfo} from '@/api/user.js'
const params = {user: 'sunnie'}
getUserInfo()
.then(() => {})
.catch(() => {})
```
[▲ 回顶部](#top) [▲ 回顶部](#top)
### <span id="base">✅ vue.config.js 基础配置 </span> ### <span id="base">✅ vue.config.js 基础配置 </span>
@ -486,7 +504,6 @@ module.exports = {
使用 例如: `src/api/home.js` 使用 例如: `src/api/home.js`
```javascript ```javascript
export function getUserInfo(params) { export function getUserInfo(params) {
return request({ return request({
url: '/api/userinfo', url: '/api/userinfo',
@ -494,14 +511,12 @@ export function getUserInfo(params) {
data: qs.stringify(params) data: qs.stringify(params)
}) })
} }
``` ```
[▲ 回顶部](#top) [▲ 回顶部](#top)
### <span id="proxy">✅ vue.config.js 配置 proxy 跨域 </span> ### <span id="proxy">✅ vue.config.js 配置 proxy 跨域 </span>
[▲ 回顶部](#top) [▲ 回顶部](#top)
#### 总结 #### 总结

1
src/views/home/index.vue
View File

@ -51,6 +51,7 @@ export default {
// 请求数据案例 // 请求数据案例
initData() { initData() {
// 请求接口数据，仅作为展示，需要配置src->config下环境文件 // 请求接口数据，仅作为展示，需要配置src->config下环境文件
const params = {user:'sunnie'}
getUserInfo() getUserInfo()
.then(() => { }) .then(() => { })
.catch(() => { }) .catch(() => { })