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

apec-fe-import-excel-component

v1.0.0

Published

|`npm run <script>`|解释| |------------------|-----------| |`serve`|服务启动在8088端口| |`build`|编译程序到dist目录下(默认目录~/dist)。| |`test`|开启Karma测试并生成覆盖率报告。| |`lint`|Lints and fixes files|

Downloads

12

Readme

蜂网

|npm run <script>|解释| |------------------|-----------| |serve|服务启动在8088端口| |build|编译程序到dist目录下(默认目录~/dist)。| |test|开启Karma测试并生成覆盖率报告。| |lint|Lints and fixes files|

二、目录结构

这个项目的结构使用的是 fractal(不规则碎片形:适合大型项目)*,方法的分组主要是依照特性而不是文件类型。注意,这个目录结构只是一个指引,并不一定要按这个来。这种结构谐在让程序更容易扩展,想了解更多请点击这里

.
├── public                   # 静态资源 (不经过webpack,只会被简单的复制)
│   └── index.html           # 项目页面模板
├──────────────────────────────────────────────────────────────────────────
├── src                      # 程序源文件
│   ├── main.js              # 程序启动和渲染入口文件
│   ├── components           # 全局可复用的组件(最好是 Presentational Components)
│   ├── views                # 主页结构 (页面)
│   │
│   ├── assert               # 静态文件 (会被打包处理)
│   ├── styles               # 全局通用样式
│   ├── https                 # 网络请求
│   ├── config               # 全局通用配置项
│   ├── utils                # 全局通用工具库
│   │
│   ├── store
│   │   ├── index.js         # 我们组装模块并导出 store 的地方, 可能还有根级别的代码
│   │   ├── modules          # 使用模块将单一状态树进行分割
│   └── routes               # 主路由和异步分割点
│       ├── index.js         # 路由入口
│       └── routes           # 路由定义
├── tests                    # 单元测试
└── vue.config               # 项目配置文件:所有打包配置项以及webpack配置

静态资源

  1. 使用相对路径引入的静态资源文件,会被webpack处理解析为模块依赖。 例如,在 <img src="./logo.png">和 background: url(./logo.png)以及CSS@import,"./logo.png" 是相对的资源路径, <img src="../image.png"> 会被编译成 createElement('img', { attrs: { src: require('../image.png') }})

  2. public文件的内容并不会被 webpack 处理:它们会直接被复制到最终的打包目录下。必须使用绝对路径引用这些文件。 参考: https://cli.vuejs.org/guide/html-and-static-assets.html#static-assets-handling

三、打包优化

四、代码规范

协同规范

  1. 除了组件使用 PascalCase 命名, 其他使用 camelCase 命名
  2. 不要使用自创的英文,缩写请使用大家都懂的缩写,如desc,fnc,num,conf等。如果不确定请使用全称
  3. 提交代码时,必须清理所有的eslint报错,以及程序运行错误
  4. 提交代码的时候请认真看好每个文件的difference
  5. 拉取代码的时候也请看清楚每个文件的difference

代码组织

  1. 当我们这写原型,写demo的时候,将多个功能,多个模块的代码放在一个地方是合理的,但是一旦你的应用增长,你应该考虑将这些code放到合适的模块中去,只有这种方式你的应用才能扩展。

  2. 组件(页面)必须以文件夹的形式出现 例子: 在src/components/文件中,存放一个GoTop组件,我们期望这样的代码组织形式 入口文件: src/components/GoTop/index.js 主文件: src/components/GoTop/GoTop.vue 常量配置: src/components/GoTop/constant.js 图片: src/components/GoTop/image/*.png 其中,入口文件和主文件为必须

  3. 文件中的index.js表示它是这个文件夹的入口文件,这是来自Node社区的命名共识。index文件是一个模块的公共入口。它描述了一个模块的公共API。外部模块只允许通过index.js文件导入模块中的共享代码。 在这个模块结构中,一个组件被 .Vue组件声明,常量配置,图片资源共同定义

  4. 不要把你没有用的代码复制粘贴进项目。如果有,请不要提交,谢谢

  5. 代码只有两种形式,src目录下的源码,node_Modules下的插件库。对于src目录内的源码,无论是手写,还是复制粘贴得来的。对于该项目内的其他成员来说,都是硬编码。所以即使是复制粘贴而来的代码,也要一行一行看清,清理干净不需要的。对于node_Modules内的插件,请区分"dependencies"与"devDependencies"。

组件规范

  1. 非Element组件,必须采用PascalCase命名
  2. 组件必须使用为Props定义,且禁止使用数组定义
  3. 组件名应该以高级别的 (通常是一般化描述的) 单词开头,以描述性的修饰词结尾
  4. 完整单词的组件名
  5. 组件选项按顺序写
  6. 每个组件必须有 name 选项
  7. 单个文件除去注释不要超过 250行

五、Setting 组件配置模块的约定

  1. 组件配置模块命名为 Modal${componentName}

  2. 统一引入 src/views/modalMixin.js 组件配置组件有强约束,必须先认真看modalMixin.js的内容

六、代码部署

测试:

sh deploy.sh development (发布到开发环境)

域名:

服务器:

目录:

七、git操作相关

多人合作流程: 先commit,再pull,再push

  1. commit 是为了告诉git,我这次提交了哪些东西,不然你只是改了,但是git不知道你改了,也就无从判断比较。
  2. pull 是为了本地 commit 和 远程 commit的对比记录,git是按照文件的行数操作进行对比的,如果同时操作了某文件的一行,那么就会产生冲突,git也会把这个冲突给标记出来,这个时候就需要先把你和冲突的那个人(本人)拉过来问问保留谁的代码,然后在 git add && git commit && git pull这三连,再次pull一次是为了防止再你们协商的时候另外一个人又给提交了一版东西,如果真发生了,那流程重复一遍,通常没有冲突的时候直接就给你合并了,不会把你的代码覆盖掉
  3. 出现代码覆盖或者丢失的情况,比如A B两人的代码 pull 时候的版本都是1,A在本地提交2,3并且推送到远程了,B 进行修改的时候没有 commit 操作,它先自己写了东西,然后git pull 这个时候 B本地版本已经到了3了,B在本地版本3的时候改了 A 写过的代码,再进行 git commit && git push那么在远程版本中就是4,而且A 的代码被覆盖了,所以说所有人都要commit 再 pull, 不然真的会覆盖代码的