安装
安装node环境
官网下载 node http://nodejs.cn/download/
:::tip npm随node一起安装,安装node后可以使用npm :::
安装淘宝NPM镜像 cnpm
npm i -g cnpm
安装前端项目专用脚手架tydic-cli
npm i -g tydic-cli
或
cnpm i -g tydic-cli
通过模板构建项目
tydic init <模板名称> [项目文件夹名称]
例如构建组件开发项目:
tydic init vue-component-base
命令行
切换到项目根目录下
make install //安装依赖make install-cn //淘宝镜像安装依赖make new <component-name> <中文名> <组件分组名> <作者名> //创建新组件. 例如 'make new radio-button 单选按钮 Basic 谢辉'make new-nomd <component-name> <中文名> <组件分组名> <作者名> //创建新组件. 例如 'make new radio-button 单选按钮 Basic 谢辉'make dev //开发模式make dist //编译项目,生成目标文件make gen-search //生成搜索数据
如果是windows系统,并且未安装make环境,请将make替换为npm run
配置
文档配置
添加组件分组
修改build/tpl/nav.config.tpl
添加分组,例如添加"View"分组
组件菜单自动生成,其他菜单需要手动配置
顶部菜单(一级菜单)
添加menu doc/components/header.vue
<!--//FIXME 顶部菜单 --> {{ langConfig.testHeader }} <!--//FIXME 顶部菜单end-->
添加路由doc/route.config.js
const generateMiscRoutes = { // 测试添加顶部菜单 let testHeaderRoute = path: `/testHeader` name: 'testHeader' component: ; return testHeaderRoute;};
添加中文名称doc/json/component.json
"header":{ "testHeader":"测试顶部菜单" }
添加页面 doc/pages/testHeader.vue
顶部菜单和页面添加完成.
系统默认包含一些页面,除默认页面可以通过删除
doc/pages/template/*.tpl
文件删除,componet.tpl页面强烈建议保留,不要更改.
左侧菜单(二级菜单)
添加路由doc/route.config.js
const generateMiscRoutes = { // 测试添加顶部菜单 let testHeaderRoute = path: `/testHeader` name: 'testHeader' component: children: // 二级菜单 path: 'testChild' name: 'testChild' component: ; return testHeaderRoute;};
添加页面 doc/pages/testChild.vue
二级菜单和页面添加完成.
包含二级菜单的页面结构可以参考
doc/pages/guild.vue
组件分类页面下的二级菜单不能更改
文档搜索
如果文档需要提供搜索功能需要在algolia注册账号
注册登录,点击钥匙图标,这里可以获取3个key: Application ID
Search-Only API Key
Admin API Key
在build/bin/目录下创建algolia-key.js文件,写入如下代码
moduleexports=moduleexportsdefault = 'Admin API Key'
Admin API Key
换成自己Admin API Key字符串
修改文件doc/components/search.vue
initIndex(){ const client = algoliasearch('Application ID', 'Search-Only API Key'); this.index = client.initIndex('tydic-vue-component-base'); }
修改algoliasearch('Application ID', 'Search-Only API Key')
里面的Application ID
和Search-Only API Key
为自己的字符串
修改文件build/bin/gen-indices.js
const client = ;
修改algoliasearch('Application ID', key)
里面的Application ID
为自己的字符串
上传自己的组件文档数据到algolia:
make gen-search
或者
node build/bin/gen-indices.js
优化
在代码块内使用{{xxx.js}}
嵌入示例代码,替代原来的手动书写