Skip to content

a multi page scaffolding, base on typescript. it is pure, no use even jquery

Notifications You must be signed in to change notification settings

coocssweb/mpa-typescript

Repository files navigation

mpa-typescript

这是一个基于webpack4.0 的前端工程,简化繁杂的前端开发。可配置多环境,可自定义配置多入口。无第三方依赖,代码体积小。支持一些好的写法,比如:Typescript,ES6、curry、compose等。

Install

# 安装依赖
npm install

# 开始开发
npm start

# 开发完了,可以构建你的代码
# 测试环境代码构建
npm run build:test

# 生产环境代码构建
npm run build

Features

  • ✔︎ 可配置多环境,开发环境、测试环境、预生产环境、生产环境等
  • ✔︎ 可自定义配置多入口,简易配置,入口和入口间相互独立
  • ✔︎ 拥有许多通用模块,让你从繁杂的网页开发中跳出来
  • ✔︎ 基于Typescript实现,让你的Javascript代码更好维护
  • ✔ 无第三方依赖,代码体积小,如果你需要其他依赖可自行引入
  • ✔ 支持响应式开发

目录说明

    ├──build/                       * webpack 工程化代码
    ├──config/                      * 配置文件目录,在这里可以自定义配置多个环境,多个入口文件
    ├──src/                         * 项目代码目录
    ├──├──app/                      * app实现
    ├──├──├──modules/               * 通用模块
    ├──├──assets/                   * 前端资源文件
    ├──├──layout/                   * 基于Ejs的模板文件
    ├──├──pages/                    * 业务代码目录
    ├──├──utis/                     * 工具类
    ├──├──constant.ts               * 通用常量
    ├──├──interface.ts              * typescript 通用接口文件

多开发环境配置

  • 在 /config/index.js 文件内,可添加修改项目的环境,目前已配置development、test、production三个环境。
  • 在build目录下建立对应的webpack环境文件
  • 并在ppackage.json配置对应构建命令即可。可参考test、production的配置。

节点配置说明

name: {                                 // 环境名称,如production
    devtool: false,                     // 是否使用devtool
    NODE_ENV: 'production',             // 全局 NODE_ENV 变量
    HOST: 'www.website.com',            // 该环境对应的host
    API: 'www.website.com/api',         // 该环境对应的api
    jsSourceMap: false,                 // 是否使用sourcemap
    cssSourceMap: false,                // 是否使用sourcemap
    eslint: false,                      // 是否使用eslint
    filePath: '',                       // 构建后资源的目录
    staticPath: '',                     // 静态资源资源的CDN路径,如://cdn.website.com
    imgPath: '',                        // 图片资源的CDN路径,如://img.website.com
    filenameHash: true,                 // 构建后的文件,是否使用hash的形式
},

多入口文件配置

在/config/pages.js文件内,可以添加多入口文件,具体如下,可参照home文件进行配置

{
    name: 'home',                                               // 入口名称
    path: resolve('src/pages', 'home/index.ts'),                // 入口文件路径
    filename: 'index.html',                                     // 构建后的名称,支持目录如:onezero/index.html
    template: resolve('src/pages', 'home/index-render.js')      // 文件模板
},

模块支持

创建一个app

文件路径: src/app/app.ts
app主体实现

new App({
    data: {
        // 这里设定的属性,可以通过this.xxx直接操作
    },
    watchs: {
        // 这里设定的属性,会进行监听,可以通过this.xxx直接操作,如果修改,会触发this.xxxHandler,可以在xxxHandler
    },
    bindEvents () {
        // 这里可以进行一些时间绑定
    },
    init () {
        // 这是程序的入口  
    }
});

tip 模块的使用

文件路径: src/app/modules/tip.ts
tip模块,支持自定义主题,是否可关闭,自动关闭时间等。

this.$tip({
    message: '这是一个提示框',              // 提示信息
    closable: true,                      // 是否可主动关闭
    duration: 0,                         // 自动关闭时间,0不自动关闭
    callback: () => {                    // 关闭后回调
        console.log('提示框关闭后');
    }
});

confirm 模块的使用

文件路径: src/app/modules/confirm.ts
confirm模块,支持自定义标题等信息,回调函数支持promise写法。

this.$confirm({
    title: '标题',                                              // 标题
    okLabel: '确定',                                            // 确认按钮,空则不显示,默认值: 确定
    cancelLabel: '取消‘,                                        // 取消按钮,空则不显示,默认值: 取消
    content: '内容',                                            // 内容
    okCallback: () => {                                        // 确定按钮回调,支持async、promise,可不传
        console.log(`click ok at:`, Date.now());
        // support callback for async
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve();
                console.log('close dialog at:', Date.now());
            }, 2000);
        });
    },
    cancelCallback,                                             // 取消按钮回调,可不传
});

当前路由信息

通过路由信息可以获取host、port、path、query的信息

console.log(this.$route);
// {"hostname":"127.0.0.1","port":9000,"path":"","query":{"id":"10","action":"justdoit"}}

router路由方法

文件路径: src/app/modules/router.ts
router模块,可调用路由方法进行页面跳转、刷新重载等操作。

this.$router.push('/page.html');
this.$router.repace('/page.html');
this.$router.goBack();
this.$router.reload();

share组件的使用

文件路径: src/app/modules/share.ts
可以自定义分享信息

// 分享信息
const shareInfo = {
    title: '测试分享标题',
    desc: '测试分享描述',
    link: 'http://www.shuxia123.com',
    imgUrl: 'http://assets.shuxia123.com/uploads/2019/1554004957941_width_748_height_500.jpg'
};
this.share = new Share(微信分享的token请求Url, QQ分享的Appid, shareInfo);
// 调用分析
this.share.callShare();

loading 模块的使用

文件路径: src/app/modules/loading.ts
适用于移动端H5开发时,需要预加载一些图片资源。

const loading = new Loading(['http://assets.shuxia123.com/uploads/2019/1555171314834_width_1289_height_476.png',
    'http://assets.shuxia123.com/uploads/2019/1555170559378_width_800_height_349.png',
    'http://assets.shuxia123.com/uploads/2019/1554905994308_width_500_height_350.jpeg'
], () => {
    console.log('图片加完成')
});
// 开始图片依赖,加载完后会自动关闭loading页
loading.start();

ajax、jsonp的使用

文件路径: src/app/modules/ajax.ts

    this.$ajax(...).then();
    this.$jsonp(...).then();

curry、compose的使用

About

a multi page scaffolding, base on typescript. it is pure, no use even jquery

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published