创建开发目录，定义项目结构
WX20200427-112836.png
assets - css 内创建 common.css公共css，item.css，layout.css，nav.css自定义导航栏，animate.css。
animate.css引入方式：
创建文件后，打开链接地址，把css复制到animate.css文件内
https://raw.githubusercontent.com/daneden/animate.css/master/animate.css
App.vue 内引入文件
<style>
@import url("./assets/css/animate.css");
</style>
//测试是否引入成功
<view class="animated bounceIn">animate.css显示动效</view>
components放置uniapp组件（uni-badge、uni-card、uni-grid、uni-tag等）
pages放置.vue页面
server - api.js 内定义接口地址并export default导出
let api = {
login:'/login'
}
export default api;
server - request.js 内定义http请求拦截，基于 unifly 定义简单的get、post请求封装，
import uniFly from '../utils/plugins/unifly/uniFly'
uniFly.baseUrl = 'http://XXX'
//APICloud签名校验
let appId = 'test-appId'
let appKey = 'test-appKey'
//设置请求头
uniFly.headers['X-APICloud-AppId'] = appId
uniFly.headers['X-APICloud-AppKey'] = appKey
//自定义请求拦截
uniFly.requestInterceptors.success = function(request) {
console.log('自定义请求拦截')
//配置基本信息
request.headers = uniFly.headers
uni.showLoading()
return request
}
uniFly.responseInterceptors.success = function(request) {
console.log('自定义响应拦截')
uni.hideLoading()
return Promise.resolve(request)
}
//post方法测试
function post(url, data) {
return uniFly.post({
url: url,
params: data
})
}
//get方法测试
function get(url, data) {
return uniFly.get({
url: url,
params: data
})
}
export {post, get}
template 内放置自定义组件
util - common - filter.js 定义过滤器方法
util - common - util.js 定义公共方法
util - plugins 内放置第三方库（uniFly等）
main文件内引入之前各文件内定义的方法
import Vue from 'vue'
import App from './App'
import filter from './utils/common/filters.js';
import { post,get} from './server/request';
import api from './server/api';
App.mpType = 'app'
import Router, {RouterMount} from 'uni-simple-router';
Vue.use(Router)
Vue.config.productionTip = false
for (let key in filter){
Vue.filter(key,filter[key])
}
Vue.prototype.api=api;
Vue.prototype.$uploadFile=uploadFile;
Vue.prototype.$post=post;
Vue.prototype.$get=get;
const router = new Router({
routes:ROUTES //路由表
});
//全局路由前置守卫
router.beforeEach((to, from, next) => {
next()
})
// 全局路由后置守卫
router.afterEach((to, from) => {
})
export default router;
const app = new Vue({
...App,
store
})
app.$mount()
