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
- 权限控制
- 骨架图
- 雪碧图
- 基础页面
- 基础组件
- 完善说明文档
- ......