alone-frame v4.4.3

create-alone-frame 使用说明

• 搭建

pnpm create alone-frame@latest

npm create alone-frame@latest

yarn create alone-frame

bun create alone-frame

• 命令

首次安装 pnpm install

开发调试 pnpm dev

构建打包 pnpm build

打包启动 pnpm start

启动服务 pnpm serve

vite

• https://vitejs.cn/vite5-cn/

vue

• https://cn.vuejs.org/guide/introduction.html

naive-ui

• https://www.naiveui.com/zh-CN/light/components/button
• naive-ui 自动引入,vue中直接使用

layui

• https://layui.dev/
• layui 已加载 vue中直接使用

路径别名配置

@root 根目录

@public public 目录

@src 开发目录

@view 视图目录

vite.config.js

• 使用默认配置

import aloneFrame from "alone-frame/frame/vite";
export default aloneFrame('src');//参数为开发目录,第二参数可代替vite.js

开发目录 自动生成

1. config/conf.js
2. config/env.js
3. config/view.js
4. mock
5. view
6. App.vue
7. main.js

config/vite.js 此文件可选

• 这个文件 和 原来vite.config.js 中一样使用

/**
 * @param option defineConfig 的参数
 * @param then   alone生成的配置
 * @param plugin 自带组件,可选设置
 */
export default function (option, then, plugin) {
    return {
        plugins: [
            /**
             * 必选
             * import vue from "@vitejs/plugin-vue";
             * 可选参数 object 设置,设置false为关
             */
            plugin.vue(),

            /**
             * 必选
             * import {createHtmlPlugin} from "vite-plugin-html";
             * 可选参数 object 设置,设置false为关
             */
            plugin.html(),

            /**
             * 必选
             * import autoImport from "unplugin-auto-import/vite";
             * 可选参数 object 设置,设置false为关
             */
            plugin.auto(),

            /**
             * 必选
             * import components from 'unplugin-vue-components/vite';
             * 可选参数 object 设置,设置false为关
             */
            plugin.compress(),

            /**
             * import svgLoader from "vite-svg-loader";
             * 可选参数 object 设置,设置false为关
             */
            plugin.svg(),
            /**
             * import markdown from 'unplugin-vue-markdown/vite';
             * 可选参数 object 设置,设置false为关
             */
            plugin.md(),

            /**
             * import {viteMockServe} from "vite-plugin-mock";
             * 可选参数 object 设置,设置false为关
             */
            plugin.mock(),

            /**
             * import viteCompression from "vite-plugin-compression";
             * 可选参数 object 设置,设置false为关
             */
            plugin.component(),

            /**
             * 必选
             * alone配置当前设置
             */
            plugin.alone_config(),

            /**
             * 必选
             * alone在main前后增加加载代码
             */
            plugin.alone_main(),

            /**
             * 必选
             * alone显示信息
             */
            plugin.alone_show(),

            /**
             * 必选
             * 打包最后处理
             */
            plugin.alone_build()
        ],
    };
}

config/env.js

_dev_ 开头key 为 pnpm dev 开发使用

export default {
   //接口网址
   api: "http://127.0.0.1:28978",

   //pnpm dev 使用
   _dev_api: "/",

   //远程配置文件路径(返回内容和conf.js一样),为空不加载
   conf: 'config',
   
   //id名,为空随机
   app: 'app',

   //打包目录,默认dist/项目, /开头为自定绝对路径目录
   dist: false,
   
   //打包要清空目录,保留那些文件或者目录
   exclude: ['.git']

   //dev模式是否开启mock
   mock: true,

   //视图目录
   view: "view",

   //运行域名
   host: "127.0.0.1",

   //运行端口
   port: "8080",
   
   //.env文件key前缀,.env要放在config目录内
   prefix: "alone_",
   
   dts: {
       //是否生成 auto-imports.d.ts
       auto: false,
       //是否生成 components.d.ts
       component: false
   },

   //favicon 为空不加载, /开头为public目录, 默认开发目录/文件
   favicon: "style/img/favicon.ico",

   //layui配置,可选,不设置默认开
   layui: {
       //开关,只有false为关
       status: true,
       //设置css
       link: "/layui/css/layui.css",
       //设置js
       script: "/layui/layui.js"
   },
   
   //打包完成是否压缩成zip
   zip: true,

   /**
    * 打包设置,为空默认开启 aloen,naive,file,chunk
    * 默认处理有 svg vue alone naive file chunk
    * key = 打包名
    * value true       开启默认设置
    * value false      关闭处理
    * value string     路径包含
    * value array      格式包含
    * value function   参数(文件,格式); 返回true设置key为打包名
    * callback object  可以改写 或者 追加方法
    */
   build: {
       //vendor.file体积太大推荐开启
       svg: false,
       //vendor.chunk体积太大推荐开启
       vue: false,
       //vendor.chunk体积太大推荐开启
       alone: true,
       //vendor.chunk体积太大推荐开启
       naive: true,
       //图片,字体,音频,视频打包成vendor.file
       file: true,
       //组件打包成vendor.chunk
       chunk: true,
       //callback可以改写或者追加方法
       callback: {}
   },
}

config/conf.js

• env.js中有conf可设置加载远程配置,同样的格式
• 远程配置优先级高过本地conf.js

• 如开启了远程加载,本地conf.js可选

  export default {
     //自定配置,可使用get_conf获取
     conf: {title: "配置"},
  
     //默认网页标题
     title: "vite_vue",
  
     //程序本地存储访问标识有效时间
     make_time: 28800,
  
     //是否开启进度条
     load_bar: true,
  
     //是否开启加载图标
     load_ico: true,
  
     //默认语言,为空关闭i18n
     locale: "cn",
  
     //回退语言
     fallback: "cn",
  
     //语言列表
     lang: {
         cn: {title: "cn_title"},
         en: {title: "en_title"}
     },
  
     //跳由不存在时跳转,false不跳转
     error: '/',
  
     //动态路由
     routing: {
         //是否开启动态路由
         status: true,
         //动态路由默认首页文件
         index: "index",
         //动态路由分组,目录:首页
         group: {
             "layui": "layui/index"
         }
     },
  
     //路由列表 只有component不一样,不要带view目录和vue格式,别的参数和官方一样,component优先path查找vue
     route: [
         {path: "index", alias: "/"},
         {path: "home", component: "index"},
         {path: "login"},
         {path: "admin/index", children: [{path: "admin/login"}, {path: "admin/main"}]},
         {path: "layui/error"},
         {path: "layui/index"},
         {path: "layui/install"}
     ]
  }

## main.js

* 此文件可选

 ```javascript
import main from "alone-frame/frame/main";

import app from "alone-frame/frame/app";

/*
app.route.beforeEach((to, from, next) => {
    console.log(to);
    next()
});

app.route.afterEach(() => {
});

app.route.onError(() => {
});

main.create.use('新组件');

main.use('新组件');
 */

App.vue

推荐使用 script setup

<template>
    <n-loading-bar-provider>
        <n-notification-provider>
            <n-modal-provider>
                <n-dialog-provider>
                    <n-message-provider>
                        <router-view/>
                    </n-message-provider>
                </n-dialog-provider>
            </n-modal-provider>
        </n-notification-provider>
    </n-loading-bar-provider>
</template>


<script setup>
    import {
        onBeforeMount,
        onMounted,
        onBeforeUpdate,
        onUpdated,
        onBeforeUnmount,
        onUnmounted,
        onActivated,
        onDeactivated,
        ref,
        reactive
    } from 'vue';

    //可使用方法
    import app from "alone-frame/frame/app";

    //本地存储空间 可设置有效时间
    import storage from "alone-frame/storage";

    //全局变量
    import global from "alone-frame/global";

    import cookie from "alone-frame/cookie";

    import session from "alone-frame/session";

    // 生命周期钩子
    onBeforeMount(() => {
        console.log('app: 组件即将挂载 (beforeMount)');
    });

    onMounted(() => {
        console.log('env', app.get_env());
        console.log('config', app.config.get());
        console.log('conf', app.get_conf());
        console.log('make', app.get_make());
        console.log('lang_title', app.get_lang('title'));
        console.log('lang_text', app.get_lang('text'));
        console.log('this', app.then());//代替this
        console.log('routes', app.routes);
        console.log('i18n', app.i18n);
        console.log('route', app.route);
        console.log('app: 组件已挂载 (mounted)');
        console.log('storage', storage.list());
        console.log('global', global.list());
        console.log('cookie', cookie.list());
        console.log('session', session.list());
    });

    onBeforeUpdate(() => {
        console.log('app: 组件即将更新 (beforeUpdate)');
    });

    onUpdated(() => {
        console.log('app: 组件已更新 (updated)');
    });

    onBeforeUnmount(() => {
        console.log('app: 组件即将卸载 (beforeUnmount)');
    });

    onUnmounted(() => {
        console.log('app: 组件已卸载 (unmounted)');
    });

    onActivated(() => {
        console.log('app: 组件已激活 (activated)');
    });

    onDeactivated(() => {
        console.log('app: 组件已停用 (deactivated)');
    });
</script>

传统 script

<template>
    <n-loading-bar-provider>
        <n-notification-provider>
            <n-modal-provider>
                <n-dialog-provider>
                    <n-message-provider>
                        <router-view></router-view>
                    </n-message-provider>
                </n-dialog-provider>
            </n-modal-provider>
        </n-notification-provider>
    </n-loading-bar-provider>
</template>

<script>
    import {defineComponent, ref, reactive} from 'vue';

    //可使用方法
    import app from "alone-frame/frame/app";

    //本地存储空间 可设置有效时间
    import storage from "alone-frame/storage";

    //全局变量
    import global from "alone-frame/global";

    import cookie from "alone-frame/cookie";

    import session from "alone-frame/session";

    export default defineComponent({
        setup() {
            return {};
        },
        methods: {},
        beforeCreate() {
            console.log('app: 组件即将创建 (beforeCreate)');
        },
        created() {
            console.log('app: 组件已创建 (created)');
        },
        beforeMount() {
            console.log('app: 组件即将挂载 (beforeMount)');
        },
        mounted() {
            console.log('env', app.get_env());
            console.log('config', app.config.get());
            console.log('conf', app.get_conf());
            console.log('make', app.get_make());
            console.log('lang_title', app.get_lang('title'));
            console.log('lang_text', app.get_lang('text'));
            console.log('this', this);
            console.log('routes', app.routes);
            console.log('i18n', app.i18n);
            console.log('route', app.route);
            console.log('app: 组件已挂载 (mounted)');
            console.log('storage', storage.list());
            console.log('global', global.list());
            console.log('cookie', cookie.list());
            console.log('session', session.list());
        },
        beforeUpdate() {
            console.log('app: 组件即将更新 (beforeUpdate)');
        },
        updated() {
            console.log('app: 组件已更新 (updated)');
        },
        beforeUnmount() {
            console.log('app: 组件即将卸载 (beforeUnmount)');
        },
        unmounted() {
            console.log('app: 组件已卸载 (unmounted)');
        }
    });
</script>

app.http方法和alone-frame/tool/http.js使用说明

http 函数是一个强大的 HTTP 客户端工具，支持多种请求方法（GET, POST, PUT, DELETE 等），并提供了丰富的配置选项、拦截器、进度监听等功能。它可以通过链式调用来设置请求参数和发送请求。

创建 HTTP 实例

1. 设置请求域名或者路径

const api = http('https://api.example.com');
const api = app.http('user/login');

链式调用方法

1. 设置请求路径和方法

   • domain(uri)：设置请求的域名。
   • path(path, method)：设置请求的路径和可选的请求方法。
   • method(method)：设置请求的方法。

   api.domain('https://api.example.com').path('/endpoint', 'GET');

2. 设置请求头

   • header(key, value)：设置单个请求头。
   • header(object)：批量设置请求头。

   api.header('Authorization', 'Bearer token');
   api.header({ 'Content-Type': 'application/json' });

3. 设置请求数据

   • data(data)：发送 URL 编码的数据。
   • json(data)：发送 JSON 数据。
   • form(data)：发送 FormData 数据。
   • text(data)：发送文本数据。
   • xml(data)：发送 XML 数据。
   • custom(data)：发送 自定义 数据。

   api.json({ key1: 'value1', key2: 'value2' });

4. 设置查询参数

   • query(object)：设置 URL 查询参数。

   api.query({ key1: 'value1', key2: 'value2' });

5. 设置超时时间

   • timeout(seconds)：设置请求超时时间（单位：秒）。

   api.timeout(15); // 15秒

6. 设置重试机制

   • retry(count, waitTime)：设置失败重试次数和重试等待时间（单位：毫秒）。

   api.retry(3, 1000); // 重试 3 次，每次等待 1000ms

7. 开启调试信息

   • log(boolean)：设置是否输出调试信息。

   api.log(true);

8. 设置跨域请求

   • cross(boolean)：设置是否发送跨域请求时带上凭据（如 cookies）。

   api.cross(true);

9. 设置响应类型

   • type(responseType)：设置响应类型，如 "json", "text", "blob" 等。

   api.type('json');

10. 设置 MIME 类型

    • mime(mimeType)：用于覆盖响应的 MIME 类型。

    api.mime('application/json');

11. 设置基本认证

    • auth(username, password)：设置 HTTP 基本认证的用户名和密码。

    api.auth('user', 'pass');

12. 设置请求模式

    • mode(modeName, enableStyle)：选择请求模式（如 "xhr", "fetch", "axios"）。

    api.mode('fetch', true); // 使用 fetch 模式

发送请求

1. 发送 GET 请求

   api.query({ id: 123 }).get('/data')
      .then(response => {
          console.log('GET response:', response);
      })
      .catch(error => {
          console.error('GET error:', error);
      });

2. 发送 POST 请求

   api.json({ key1: 'value1', key2: 'value2' }).post('/data')
      .then(response => {
          console.log('POST response:', response);
      })
      .catch(error => {
          console.error('POST error:', error);
      });

3. 发送 PUT 请求

   api.json({ key1: 'updatedValue' })
      .put('/data/123')
      .then(response => {
          console.log('PUT response:', response);
      })
      .catch(error => {
          console.error('PUT error:', error);
      });

4. 发送 DELETE 请求

   api.delete('/data/123')
      .then(response => {
          console.log('DELETE response:', response);
      })
      .catch(error => {
          console.error('DELETE error:', error);
      });

使用拦截器

1. 请求拦截器

   api.req((option, data) => {
       // 修改请求参数
       return option;
   }, (data) => {
       // 修改请求数据
       return data;
   });

2. 响应拦截器

   api.res((data, status, xhr) => {
       // 处理成功响应
   }, (data, status, xhr) => {
       // 处理错误响应
   });

进度监听

api.process((res, status, type, xhr) => {
    if (type === 'upload') {
        console.log(`Upload progress: ${res}%`);
    } else if (type === 'process') {
        console.log(`Download progress: ${res}%`);
    }
});

示例代码

const api = http('https://api.example.com')
    .header('Authorization', 'Bearer token')
    .timeout(10)
    .retry(2, 500)
    .query({ id: 123 })
    .log(true);

api.get('/data').then(response => {
        console.log('Data received:', response);
    })
    .catch(error => {
        console.error('Error fetching data:', error);
    });

已装组件

pnpm create vite

pnpm install alone-frame

pnpm install vue-i18n vue-router nprogress @types/node

pnpm install vite-plugin-compression vite-plugin-html vite-plugin-mock

pnpm install unplugin-auto-import unplugin-vue-components vite-svg-loader

pnpm install naive-ui vfonts

pnpm install esbuild esnext terser typescript

pnpm install less sass scss less-loader

pnpm install glob archiver 

pnpm install unplugin-vue-markdown @unhead/vue 

• md可选

pnpm install -D markdown-it markdown-it-anchor markdown-it-prism