uni-app项目架构（一）

﹏ヽ暗。殇╰゛Y 2022-12-09 02:27 137阅读 0赞

目前多端开发的话，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中如下书写

.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卫士,请求函数封装，安全之类的