这是一个简易的教程文档,会手把手带你过一遍 dot-template 基本功能,如果你已经对它很熟悉了,可以忽略此文件!
访问此文件的线上版本: https://www.zybuluo.com/qiu8310/note/517787
可能你已经发现了,你只是简单的创建了一个 .dtpl 文件夹,系统就已经为你创建了一大堆文件在其目录下。对,这就是 dot-template 的功能,自动为你创建文件,并生成内容。
* 查看此文档需要结合同目录下的 dtpl.ts 文件一起阅读,dtpl.ts 文件是 dot-template 的配置文件
你会发现 my-example 目录下又多了一大批文件,而且最外层 目录上也多了几个文件:
- package.json
- tsconfig.json
- webpack.config.js
- .gitignore
如果项目中之前就有这些文件,那么原文件会被放到 .backup 目录内
它是怎么创建的?
请查看 .dtpl/dtpl.ts
文件中的 模板一 : 项目模板
配置部分
-
先用 npm 在项目根目录下安装依赖包
npm install
-
启动服务
npm run dev
-
打开浏览器,访问 http://localhost:8080/
就这么简单,你就创建了一个 react 项目了!!! 不过 dot-template 并没有到此就结束了!
你会发现 dot-template 根据模板 .dtpl/template/widget.tsx.dtpl
自动为你填充了一些基本的内容,在不修改源码的情况下,你就可以直接使用这个新创建的组件!你也可以修改源模板的内容来适应你自己的项目!
请查看 .dtpl/dtpl.ts
文件中的 模板二 : 文件模板
配置部分
你会发现和在 widge 目录创建文件一样,没什么太大的区别。但是,别急:先确保 Test.tsx
文件在编辑状态下,接着你按下 cmd+k cmd+p
(window 下是ctrl+k ctrl+p
)快捷键试试。
你会发现系统自动在 my-example/page/style
目录下创建了一个同名的 Test.css
文件,并且在 Test.tsx
文件中插入了对此 css 的引用!
请查看 .dtpl/dtpl.ts
文件中的 模板三 : 创建关联文件,并生成其内容
配置部分
当你对 dot-template 生成的内容,或新生成的文件不满意时,你可以使用快捷键 cmd+k cmd+u
(window 下是 ctrl+k ctrl+u
)来撤销,重复再按一次会重新生成,但是,如果 1分钟 后没有撤销的话,就无法再撤销了(主要因为怕误操作,而操作者自己确不知,这样可能会导致文件无法恢复)
如果你喜欢的话,欢迎 给个 Star
如果你有建议的话,欢迎 提 Issue