ddl-cli

A simple CLI for scaffolding danduola front-end projects.

Installation

$ npm install -g ddl-cli

or

& yarn global add ddl-cli

Usage

$ ddl init <template-name> <project-name>

Example:

$ ddl init webpack my-project

项目说明

项目目录及说明

danduola-template
├─.babelrc  /-babel配置
├─.gitignore /-git忽略项
├─README.md
├─babel.config.js /-babel配置
├─package.json 
├─tsconfig.json /- typescript 配置文件
├─vue.config.js /- vue-cli4.5配置文件
├─src
|  ├─App.vue 
|  ├─global.ts /- 全局变量
|  ├─main.ts /- 程序的入口文件
|  ├─plugins.ts /- 程序的依赖配置
|  ├─views /- 存放页面
|  |   ├─401.vue
|  |   └404.vue
|  ├─utils /- 存放工具类
|  |   ├─accessToken.ts /- 用户token
|  |   ├─clipboard.ts /- 复制工具
|  |   ├─emitter.ts /- eventBus
|  |   ├─excel.ts /- excel导出工具
|  |   ├─handleRoutes.ts /- 处理路由(未完成)
|  |   ├─index.ts /- 一些通用函数
|  |   ├─permission.ts /- 权限相关(未完成)
|  |   ├─request.ts /- 请求的基础封装
|  |   ├─scoll-to.ts /- 滑动封装
|  |   ├─static.ts /- mock静态化
|  |   ├─validate.ts /- 一些表单校验函数
|  |   └zip.ts /-生成.zip文件
|  ├─types /-声明文件
|  |   ├─shim-tsx.d.ts /-tsx的声明
|  |   ├─shim-vue.d.ts /-vue文件的声明
|  |   ├─source.d.ts /-静态资源的声明
|  |   └window.d.ts /-window的声明
|  ├─styles
|  |   ├─mixins.scss /- 样式混入定义
|  |   ├─variables.scss /- 全局变量及函数
|  |   ├─var /- 变量
|  |   |  ├─animate.scss /- 动画
|  |   |  ├─breakpoint.scss /- 屏幕
|  |   |  └index.scss /- 其他
|  |   ├─color /- 颜色
|  |   |   └index.scss
|  ├─store /- vuex 状态管理
|  |   ├─index.ts
|  |   ├─modules /模块 已做namespace 使用时注意下
|  |   |    ├─setting.ts
|  |   |    └user.ts
|  ├─router /- 路由 只基本使用 TODO: 守卫、权限、....
|  |   └index.ts
|  ├─languages /- 多语言
|  |     ├─en.ts
|  |     ├─index.ts
|  |     ├─tw.ts
|  |     ├─us.ts
|  |     └zh.ts
|  ├─config /- 配置
|  |   └proj.js /- 项目配置
|  ├─components 
|  |     ├─LanguageChange 多语言切换
|  |     |       ├─index.tsx
|  |     |       └styles.scss
|  ├─assets /- 项目静态资源
|  |   ├─logo.png
|  |   ├─error_images
|  |   |      ├─401.png
|  |   |      ├─404.png
|  |   |      └cloud.png
|  ├─api /- 网络请求
|  |  ├─user
|  |  |  ├─index.ts
|  |  |  └url.ts
├─public /- html模板
|   ├─favicon.ico
|   └index.html
├─mock /- 模拟webapi
|  ├─index.js
|  ├─mockServer.js /- mock 服务器
|  ├─utils /- 工具类
|  |   └index.js
|  ├─controller /- api controller
|  |     └user.js
├─dist /- 打包文件
|  ├─favicon.ico
|  ├─index.html
|  ├─static
|  |   ├─js
|  |   | ├─app.d84192c6.js
|  |   | ├─app.d84192c6.js.gz
|  |   | ├─chunk-1b8c274c.79f9be2c.js
|  |   | ├─chunk-ac3c70da.b845dd3d.js
|  |   | ├─chunk-ant.e676be31.js
|  |   | ├─chunk-ant.e676be31.js.gz
|  |   | ├─chunk-libs.4b7e1eca.js
|  |   | └chunk-libs.4b7e1eca.js.gz
|  |   ├─img
|  |   |  ├─401.45c9d07d.png
|  |   |  └404.02cd53b2.png
|  |   ├─css
|  |   |  ├─app.067a44f6.css
|  |   |  ├─chunk-1b8c274c.0d07f738.css
|  |   |  ├─chunk-ac3c70da.79f3f06a.css
|  |   |  ├─chunk-ant.292721b8.css
|  |   |  └chunk-ant.292721b8.css.gz

目前完成打包优化

• 添加别名
• 压缩图片
• 引入cdn资源
• 删除moment无用语言包
• 去除console.log
• 单独打包体积较大的第三方模块
• 开启Gzip压缩
• 引入最新的scss loader

TODO

• 权限控制
• 骨架图
• 雪碧图
• 基础页面
• 基础组件
• 完善说明文档
• ......