@tydic-group/component-template

安装

安装node环境

:::tip npm随node一起安装,安装node后可以使用npm :::

安装淘宝NPM镜像 cnpm

npm i -g cnpm

安装前端项目专用脚手架tydic-cli

npm i -g @tydic-group/tydic-cli

或

cnpm i -g @tydic-group/tydic-cli

通过模板构建项目

tydic init <模板名称> [项目文件夹名称]

例如构建组件开发项目:

tydic init template-vue-plugins-demo-base

命令行

切换到项目根目录下

make 命令使用说明
   make install                         ---  安装依赖
   make install-cn                      ---  淘宝镜像安装依赖
   make new <component-name> <中文名> <组件分组名> <作者名>     ---  创建新组件和demo文件. 例如 'make new radio-button 单选按钮 Basic 谢辉'
   make new-component <component-name> <组件分组名> <中文名> <作者名>     ---  只创建新组件
   make new-demo <component-name> <组件分组名> <中文名> <作者名>     ---  只创建demo文件
   make theme <theme-name>              ---  创建主题. 例如 'make theme default'
   make dev                             ---  开发模式
   make build-doc                       ---  编译doc
   make dist                            ---  编译项目，生成目标文件
   make dist-component                  ---  编译组件
   make dist-theme                      ---  编译主题样式
   make dist-all                        ---  分别编译每个组件项目
   make pub                             ---  发布组件加样式到 npm 上
   make pub-component                   ---  发布组件到 npm 上
   make pub-all                         ---  发布各组件到 npm 上

如果是windows系统,并且未安装make环境,将make替换为npm run

配置

组件开发配置

全局配置

./package.json

name:'projectName'        插件发布名称,可使用scope包,例如 "@scope/projectName"

build/config/global.js

appPrefix:                组件标签前缀

cssType: 'less'           组件使用的CSS预处理语言

文档配置

添加组件分组

修改build/tpl/nav.config.tpl添加分组,例如添加"View"分组

 {
    "name": "组件",
    "groups": [
      {
        "groupName": "Basic",
        "list": [
        ]
      },
      {
        "groupName": "View",  //插入此处
        "list": [
        ]
      },
      {
        "groupName": "Form",
        "list": [
        ]
      },
      {
        "groupName": "Table",
        "list": [
        ]
      },
      {
        "groupName": "Data",
        "list": [
        ]
      },
      {
        "groupName": "Notice",
        "list": [
        ]
      },
      {
        "groupName": "Navigation",
        "list": [
        ]
      },
      {
        "groupName": "Others",
        "list": [
        ]
      }
    ]
  }

组件菜单自动生成,其他菜单需要手动配置

顶部菜单(一级菜单)

添加menu doc/components/header.vue

   <!--//FIXME 顶部菜单 -->
        <ul class="nav">
          <li class="nav-item nav-algolia-search" v-show="isComponentPage">
            <algolia-search></algolia-search>
          </li>
          <li class="nav-item">
            <router-link
              active-class="active"
              :to="`/testHeader`">{{ langConfig.testHeader }}
            </router-link>
          </li>
          <!--//FIXME 顶部菜单end-->

添加路由doc/route.config.js

const generateMiscRoutes = function () {
  // 测试添加顶部菜单
  let testHeaderRoute = {
    path: `/testHeader`,
    name: 'testHeader',
    component: load('testHeader')
  };

  return [testHeaderRoute];
};

添加中文名称doc/json/component.json

 "header":{
    "testHeader":"测试顶部菜单"
  }

添加页面 doc/pages/testHeader.vue

顶部菜单和页面添加完成.

系统默认包含一些页面,除默认页面可以通过删除doc/pages/template/*.tpl文件删除,componet.tpl页面强烈建议保留,不要更改.

左侧菜单(二级菜单)

添加路由doc/route.config.js

const generateMiscRoutes = function () {
  // 测试添加顶部菜单
  let testHeaderRoute = {
    path: `/testHeader`,
    name: 'testHeader',
    component: load('testHeader'),
    children: [
          {
          // 二级菜单
          path: 'testChild',
          name: 'testChild',
          component: load('testChild')
        }
      ]
  };

  return [testHeaderRoute];
};

添加页面 doc/pages/testChild.vue

二级菜单和页面添加完成.

包含二级菜单的页面结构可以参考doc/pages/guild.vue

###组件分类页面下的二级菜单不能更改

 {
    "name": "开发指南",
    "children": [
      {
        "path": "/installation",
        "name": "安装"
      },
      {
        "path": "/quickstart",
        "name": "快速上手"
      }
      //可以在此添加三级菜单,对应在mdsdoc/文件夹内构建相对于path的md文件
    ]
  }

文档搜索

如果文档需要提供搜索功能需要在algolia注册账号

注册登录,点击钥匙图标,这里可以获取3个key: Application ID Search-Only API Key Admin API Key

在build/bin/目录下创建algolia-key.js文件,写入如下代码

module.exports=module.exports.default = '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);

修改algoliasearch('Application ID', key)里面的Application ID为自己的字符串

上传自己的组件文档数据到algolia:

make gen-search

或者

node build/bin/gen-indices.js

###优化在代码块内使用{{xxx.js}}嵌入示例代码,替代原来的手动书写