npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

cms-components

v0.0.2

Published

A project named cms-components

Downloads

2

Readme

安装

安装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-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 IDSearch-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}}嵌入示例代码,替代原来的手动书写