uni-app项目架构（一）

目前多端开发的话，nui-app还是不错的选择，可以一套代码多端使用，而且在不同端的表现也不错，基本差异不大，ok，简单一说，下面开始正题：

一：首先是NPM代码库的使用，有人习惯使用插件市场，那个不多说了，可视化的，这里说一下如何使用npm安装相关插件

1.首先要生成一个package.json文件， 在项目根目录下启用cmd，然后执行npm init，回车根据提示在命令行配置package.json的相关信息（不做过多要求，可以一直回车完成），完成后会在根目录下生成一个package.json文件，这里面就是依赖的相关信息，大家应该都知道，不多说了

2.生成package.json文件之后便可以在项目根目录下启用cmd，用熟悉的方式npm install了

3.install后就可以在组建中使用了，也可以在main中配置全局，总之和vue的使用一样的，关键点在于一开始生成的package.json文件，这个是uni-app原来没有的

二：在uni-app中使用vue-router，这里可以安装uni-simple-router来实现

1.首先是安装此插件，根目录下执行npm install uni-simple-router

2.根目录下创建router文件夹并在文件夹下创建index.js,内容如下

// router/index.js

import Vue from 'vue'
import Router from 'uni-simple-router'
import { getToken } from '@/utils/cookie' // getToken from cookie

Vue.use(Router)
//初始化
const router = new Router({
    routes:[
        {
            //注意：path必须跟pages.json中的地址对应，最前面别忘了加'/'哦
          path: '/pages/index/login',
          aliasPath:'/',  //对于h5端你必须在首页加上aliasPath并设置为/
          name: 'login',
            meta: {
                title: '登录',
            },
        },
        {
            path: '/pages/index/index',
            name: 'index',
            meta: {
                title: '首页',
            },
        },
    ]
});
export default router;

 代码很熟悉吧，是，其实和vue-cli中没什么大的区别

3.在main.js中如下，引入并配置

import router from './router'
//v1.3.5起 H5端 你应该去除原有的app.$mount();使用路由自带的渲染方式
// #ifdef H5
	RouterMount(app,'#app');
// #endif

// #ifndef H5
	app.$mount(); //为了兼容小程序及app端必须这样写才有效果
// #endif

4.ok这样就可以在组件内使用了，诸如this.$Router.push({path: '/pages/index/index'})之类的，和vue-cli中使用一样

三：讲一下多环境变量的配置吧，我们在vue-cli中配合webpack会利用node的process进行环境变量的配置，来区分开发环境，生产环境等不同的环境变量，uni-app中也可以实现

1.在根目录下创建.env.js .env.dev.js .env.prod.js

.env.js中如下书写

(function() {  
    const NODE_ENV = 'dev'; // dev:开发环境 | test:测试环境  
    let ENV_VAR = null;  

    if (process.env.NODE_ENV === "development") {  

        if (NODE_ENV === 'dev') {  
            ENV_VAR = require('.env.dev.js');  
        } else if (NODE_ENV === 'test') {  

        }  

    } else if (process.env.NODE_ENV === "production") {  

        ENV_VAR = require('.env.prod.js');  

    }  

    if (ENV_VAR) {  
        process.uniEnv = {};  
        for (let key in ENV_VAR) {  
            process.uniEnv[key] = ENV_VAR[key];  
        }  
    }  
})();

.env.dev.js中如下：

const UNI_APP = {  
    BASE_API: '/dev-api'  
}  

module.exports = UNI_APP;

.env.prod.js中如下：

const UNI_APP = {  
    BASE_API = '"http://www.xxxxx.com/"'  
}  

module.exports = UNI_APP;

然后在main.js中如下配置

import '.env.js'

//环境变量配置
export default {  
    globalData: process.uniEnv  
};

OK这样就可以在全局使用环境变量了，如：process.uniEnv.BASE_API

今天先写这些吧，下个文章在讲述一下其他的，如：request卫士，router卫士,请求函数封装，安全之类的