uni-app开发微信小程序 三、定义项目结构，创建文件

创建开发目录，定义项目结构

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()