【uView组件库导入及使用】
1. 导入uView组件库依赖
- （无package.json）npm init -y
- npm install uview-ui@1.8.8
- 安装成功，自动放到“@/node_modules/uview-ui/”（可自行更换路径）
2. 项目配置使用uView
- App.vue
<style lang="scss">@import "uview-ui/index.scss";
</style>
- uni.scss
@import './uview-ui/theme.scss';
- pages.json
{"easycom": {"^u-(.*)": "@/node_modules/uview-ui/components/u-$1/u-$1.vue"},"pages":[]
}
- main.js
// 放置到 import Vue from 'vue'之后，app.$mount()之前
import uView from 'uview-ui'
Vue.use(uView)
【接口封装】
1. 创建 http.request.js 文件（封装全局请求配置）
export const baseURL = '域名';export const request = (options) => {return new Promise((resolve, reject) => {uni.showLoading({title:'请求中...'})uni.request({url: baseURL + options.url,method: options.method || 'GET',data: options.data || {},header: {'token': uni.getStorageSync("token") || ""},success: (res) => {if (res.code == 200) {resolve(res.data)} else {reject(res)}// 如果不满足上述判断就输出数据},fail: (err) => {console.log(err)reject(err)},complete() {uni.hideLoading()}})})
}
2. 创建 http.api.js 文件（封装全局API）
import {request
} from '@/common/http.request.js'// 登录
export const LoginUser = (data) => request({url: 'user/login',method: 'post',data
})// 获取所有用户
export const getUserList = () => request({url: 'user/list',method: 'get',
})
3. 页面调用接口
<script>import {LoginUser,getUserList} from '@/common/http.api.js'export default {data() {return {}}}
</script>
 题解)
)
