alone-frame

v5.6.2

Published

7 months ago

* 搭建

0High
0Medium
0Low

zhqings

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

开发目录自动生成

config/conf.js
config/env.js
config/view.js
mock
view
App.vue
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",
       //设置base目录
       base: "./lay/"
   },
   
   //打包完成是否压缩成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

此文件可选

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 实例

设置请求域名或者路径

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

链式调用方法

设置请求路径和方法
- domain(uri)：设置请求的域名。
- path(path, method)：设置请求的路径和可选的请求方法。
- method(method)：设置请求的方法。
```
api.domain('https://api.example.com').path('/endpoint', 'GET');
```
设置请求头
- header(key, value)：设置单个请求头。
- header(object)：批量设置请求头。
```
api.header('Authorization', 'Bearer token');
api.header({ 'Content-Type': 'application/json' });
```
设置请求数据
- data(data)：发送 URL 编码的数据。
- json(data)：发送 JSON 数据。
- form(data)：发送 FormData 数据。
- text(data)：发送文本数据。
- xml(data)：发送 XML 数据。
- custom(data)：发送自定义数据。
```
api.json({ key1: 'value1', key2: 'value2' });
```
设置查询参数
- query(object)：设置 URL 查询参数。
```
api.query({ key1: 'value1', key2: 'value2' });
```
设置超时时间
- timeout(seconds)：设置请求超时时间（单位：秒）。
```
api.timeout(15); // 15秒
```
设置重试机制
- retry(count, waitTime)：设置失败重试次数和重试等待时间（单位：毫秒）。
```
api.retry(3, 1000); // 重试 3 次，每次等待 1000ms
```
开启调试信息
- log(boolean)：设置是否输出调试信息。
```
api.log(true);
```
设置跨域请求
- cross(boolean)：设置是否发送跨域请求时带上凭据（如 cookies）。
```
api.cross(true);
```
设置响应类型
- type(responseType)：设置响应类型，如 "json", "text", "blob" 等。
```
api.type('json');
```
设置 MIME 类型
- mime(mimeType)：用于覆盖响应的 MIME 类型。
```
api.mime('application/json');
```
设置基本认证
- auth(username, password)：设置 HTTP 基本认证的用户名和密码。
```
api.auth('user', 'pass');
```
设置请求模式
- mode(modeName, enableStyle)：选择请求模式（如 "xhr", "fetch", "axios"）。
```
api.mode('fetch', true); // 使用 fetch 模式
```

发送请求

发送 GET 请求

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

发送 POST 请求

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

发送 PUT 请求

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

发送 DELETE 请求

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

使用拦截器

请求拦截器

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

响应拦截器

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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

create-alone-frame 使用说明

vite

vue

naive-ui

layui

路径别名配置

vite.config.js

开发目录 自动生成

config/vite.js 此文件可选

config/env.js

config/conf.js

main.js

App.vue

传统 script

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

创建 HTTP 实例

链式调用方法

发送请求

使用拦截器

进度监听

示例代码

已装组件

开发目录自动生成

传统 `script`

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