创建uniapp空项目并引入uViewUI

公司有这方面的需求，以前是用的uview1.0，现在uview2.0出来了当然要重新整理一个空项目了。

步骤

1. 创建uniapp项目（直接在HBuilder X 中创建)
2. 引入uViewUI

创建uniapp项目

直接创建一个空项目就行了。

文件 ==> 新建 ==> 项目 ==> 默认模板

引入uView

插件市场找到对应插件uView2.0，点击使用HBuilder X导入插件。

导入插件后，项目目录会多出uni_modules文件夹。接下来需要我们配置一些东西。具体可以看下载方式相关配置。这个没什么好讲的，直接跟着步骤走。简单说明一下~~

1. 没安装scss插件的记得安装。
2. 引入uView主JS库
3. 在项目根目录下的uni.scss中添加样式文件
4. App.vue中引入样式文件
5. 配置easycom组件模式

到了这里其实uView的组件就可以在项目中使用了。但是我想要说两点重要的东西，也是咱们项目中常用的东西。

1. Navbar 自定义导航栏
2. 请求配置

自定义导航栏咱们可以根据项目需求自行进行二次封装，项目如果还OK，其实就直接使用该组件也是可以的。

请求配置

请求在项目中是必不可少的，uView都跟咱们封装好了，太香了。配置也是直接根据官网配置就行，简单说明一下。

1. 根目录下创建目录(目录名自取),添加一个http.js文件。
2. main.js引入http.js文件，并调用。

main.js

// main.js
import httpInit from './utils/http.js'
httpInit(app)

http.js

// http.js
import Vue from 'vue'
export default vm => {
	// 初始化请求配置
	const http = uni.$u.http
	http.setConfig((config) => {
		config.baseURL = 'http://192.168.2.48:8098';
		return config
	})

	// 请求拦截
	// 这里面常用就是添加token，其他需要做什么操作也可以
	http.interceptors.request.use((config) => {
		uni.showLoading({
			mask: true
		})
		if (uni.getStorageSync('token')) {
			config.header.Authorization = uni.getStorageSync('token')
		}
		return config
	}, config => {
		uni.hideLoading()
		return Promise.reject(config)
	})

	// 响应拦截
	// 这里面就是处理数据和解决一些异常，自行了解
	http.interceptors.response.use((response) => {
		uni.hideLoading()
		const data = response.data
		if (data.status == 'success') {
			return data.data
		} else {
			uni.redirectTo({
				url: "/pages/home/login"
			});
		}
	}, (response) => {
		uni.hideLoading()
		return Promise.reject(response)
	})
	// 看各自爱好把，这里我直接添加到vue上面了，方便我直接使用this.$http使用。
	Vue.prototype.$http = http
}

请求弄好了，看下使用把。简单写了下登录请求。

async login() {
	const res = await this.$http.post('/api/Authorize/Login', {
			Account: 'admin',
			Pwd: '123456'
		})
		uni.setStorageSync('token', res.token)
		uni.redirectTo({
			url: './Index'
		})
}