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

ymy-commons-ui

v1.0.2

Published

Admin by Vue

Downloads

1

Readme

项目开发手册

彭康德,周浩

开发环境及工具配置说明

###开发环境

windows/mac/linux
node 8.x
WebStorm 2017.x
git

###开发语言

es6
scss
html
jsx

####注意

请不要在项目范围内使用ts或jade等语言

###编码风格设置

WebStorm编码风格设置:Settings->Edit->Code Style->javaScript
点击右上角“set from...”,选择Predifined Style,选择google编码风格,点击右下角确定

###模块引入原则

引入新模块必须知会项目组内所有开发人员,并向项目管理员提申请,由管理员统一引入

###编码规范 ####分号使用原则

在每一个语句结束必须使用**;**结尾

####引号使用原则

字符串字面量表达式统一使用单引号(标签属性除外),例如
let str = 'hello world';
<div class="show"></div>

####对象声明原则

不变动的对象使用const声明成常量,变动的**必须**使用let声明,**不允许**使用var声明对象

####全局组件命名原则

全局组件声明必须以**ymy-**开头

###代码提交

提交代码前必须:
1.格式化代码
2.编译通过
3.测试通过

代码提交时间:
下午6点前

代码更新时间:
上午9点前

必须描述清楚提交内容

安装和启动

# 安装依赖
npm install

# 开发环境启动
npm run dev

# 编译
npm run build

# 编译并显示报表
npm run build --report

# 执行单元测试
npm run unit

# 执行自动化测试
npm run e2e

# 运行所有测试
npm test

###注意

npm install失败,请安装cnpm(npm install -g cnpm --registry=https://registry.npm.taobao.org),再运行cnpm安装依赖包。
发现所有依赖包下载成功,运行仍然提示缺少模块异常,请重新编译异常模块(npm rebuild 异常模块),如果编译提示缺少某些环境,
例如 python ruby等,请升级node版本或安装相关依赖环境并配置环境变量

项目结构

  |-- build                            // 项目构建(webpack)相关代码
  |   |-- build.js                     // 生产环境构建代码
  |   |-- check-version.js             // 检查node、npm等版本
  |   |-- dev-client.js                // 热重载相关
  |   |-- dev-server.js                // 构建本地服务器
  |   |-- utils.js                     // 构建工具相关
  |   |-- webpack.base.conf.js         // webpack基础配置
  |   |-- webpack.dev.conf.js          // webpack开发环境配置
  |   |-- webpack.prod.conf.js         // webpack生产环境配置
  |-- config                           // 项目开发环境配置
  |   |-- dev.env.js                   // 开发环境变量
  |   |-- index.js                     // 项目一些配置变量
  |   |-- prod.env.js                  // 生产环境变量
  |   |-- test.env.js                  // 测试环境变量
  |-- src                              // 源码目录
  |   |-- components                     // vue公共组件
  |   |-- store                          // vuex的状态管理
  |   |-- App.vue                        // 页面入口文件
  |   |-- main.js                        // 程序入口文件,加载各种公共组件
  |-- static                           // 静态文件,比如一些图片,json数据等
  |   |-- data                           // 群聊分析得到的数据用于数据可视化
  |-- .babelrc                         // ES6语法编译配置
  |-- .editorconfig                    // 定义代码格式
  |-- .gitignore                       // git上传需要忽略的文件格式
  |-- README.md                        // 项目说明
  |-- favicon.ico
  |-- index.html                       // 入口页面
  |-- package.json                     // 项目基本信息

##代理设置

修改配置文件config/index.js,例如
var srcUlr = 'http://localhost:8080';

##项目架构 ###相对路径

@:指向src目录,定义在build/webpack.base.conf.js下

####注意

项目内所有模块引入必须使用@相对路径(node_modules除外)

###模块引入 ####同步加载

import 变量名 form ‘模块路径’

####延迟加载

const 变量名 = resolve => require([‘模块路径’], resolve)

###全局变量

所有全局变量统一在src/main.js内声明,声明方式:import 'expose-loader?变量名!文件路径'
httpClient:http客户端实例,支持队列,支持Loading效果
_:lodashjs实例,提供常用函数,具体参照http://lodashjs.com/docs/
Promise:用于兼容ie10

####注意

请不要命名与全局变量相同的变量名

###全局组件

所有全局组件统一在src/main.js内声明,声明方式:Vue.use(组件);
elementUI:通用ui组件集,具体参照http://element.eleme.io

###路由

路由文件 src/router/index.js

####路由配置模板

路由详情请参阅:https://router.vuejs.org/zh-cn/advanced/data-fetching.html

#####简单路由

{
    path: '',             //路由路径
    component: 组件对象    //组件
}
应用场景:整个页面跳转到新页面

#####嵌套路由

{
    path: '',                               //路由路径
    component: 包含<router-view>的组件对象,   //组件
    children: [
      {
        path: '',
        component: 组件对象
      }]
}
<router-view>为渲染出口
应用场景:页面部分内容需要跳转

###组件 ####公共组件 #####业务组件

业务组件存放目录:src/components/business

#####系统组件

业务组件存放目录:src/components

系统组件清单
layout:布局组件,用于包裹菜单与导航,并提供路由内容包裹
page:分页组件
panel:面板组件
sidebar:菜单组件
topbar:导航组件

####非公共组件 #####业务页面

业务页面存放目录:src/pages

###工具 #####条件过滤

文件目录:src/uitls/validate.js

引用:import { isPhone } from '@/utils/validate'
使用:isPhone(value)

###接口