发表于

发布自己的npm包到全局仓库

去npm官网注册一个账号

传送门： https://www.npmjs.com/signup

本地登录账号

1
2
3
4
5
6
$ npm login
Username: xxxxxx
Password:
Email: (this IS public) xxx@gmail.com
Logged in as falm on https://registry.npmjs.org/.

恭喜，登录成功。

初始化

1
2
3
$ mkdir npm-project && cd npm-project
$ npm init

输入完npm init之后，跟着填写项目信息就可以了。

1
2
3
4
5
6
7
8
9
name: npm-project  # 填写包名
version: (1.0.0)                       # 版本号
description: a new npm-project # 描述
entry point: (index.js)      #  入口文件名
test command:
git repository: https://github.com/xiatiandenixi/npm-project.git  # git仓库地址
keywords: keywords    # 关键字
author: xiatiandenixi  # 作者
license: (ISC) MIT   # 许可证

生成的package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# package.json
{
  "name": "npm-project",
  "version": "1.0.0",
  "description": "a new npm-project",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/xiatiandenixi/npm-project.git"
  },
  "keywords": [
    "keywords"
  ],
  "author": "xiatiandenixi",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/xiatiandenixi/npm-project/issues"
  },
  "homepage": "https://github.com/xiatiandenixi/npm-project#readme"
}

接下来就是愉快的码代码时间….

发布

1
npm publish

发表于

组件库设计实战

组件分类

  • 组件类
  • 控件类

代码写法代表组件类型：

  • 不含有内部状态的以纯函数写法表示的无交互的纯渲染组件
  • 含有内部状态以 ES6 class 写法表示的有交互的智能控件

所以我们新增一个组件的时候，可以从组件是否含有内部状态、是否有交互等几个方面来将其归入组件或控件，并以此来确认其相应的代码规范。

延伸来说，除了基础的组件与控件的分别之外，我们还推荐大家从业务的角度出发再划分出一种组件类型，叫做容器。

卡片本身应当是一个纯渲染组件，但在我们代入具体的业务场景后就会发现，卡片本身其实是有状态的，最常见的如数据加载中、数据为空、数据错误等。这样一个无交互但含有自身状态的组件无论归于上述的哪个分类都会让人感到奇怪，所以我们又引入了容器这样一个新的分类，专门用来存放卡片这类组件。

文档管理

编写组件库本身并不是我们的最终目的，让更多的人在业务开发中使用起来才是，所以一个组件库的文档是否足够清晰、完善，也是决定一个组件库成败的关键。

什么样的文档是好的？我想它起码应该达到以下两个要求：

  • 属性全覆盖
    • 属性名、具体描述、数据类型、是否有默认值、是否必须等
  • 示例丰富

属性全覆盖的重要性在这里就不赘述了，因为使用者在不阅读源码的前提下想要了解组件的所有功能，除了阅读组件文档外就没有其他的方法了，大部分的组件库也都可以做到这一点，但示例丰富，就是体现组件库开发者良心之处的地方了。

发表于

card.vue

slot插槽

外层的div没有意义

1
2
3
<div class="card-slot">
  <slot name="media"></slot>
</div>

改正

1
2
3
<slot name="media">
  <img class="card-slot" src="../assets/logo.png" alt="">
</slot>

props传递数据

举个例子，card组件可以选择sm/md/lg三种大小

子组件props里设置了size、 data里设置了size_: ‘sm’

在组件created钩子函数里使this.size_ = this.size

1
2
3
4
<!--默认大小 sm-->
<card :title="child.name">
<!--设置大小 lg-->
<card :title="child.name" size="lg">

sideDialog.vue

  • 直接引用element-ui里的el-dialog组件

  • 调用el-dialog实例的open和close方法要用到ref属性拿到实例

    1
    2
    3
    4
    <el-dialog ref="dialog">
    ...
    </el-dialog>
    this.$refs.dialog.open()

  • el-dialog组件不能嵌套

  • el-dialog封装的一些Attributes值类型为Boolean时参数前面要加上:

图片资源

在template里用到的图片地址如果放到script标签里要用require()包起来

IE显示空白问题

在webpack.base.conf.js的entry配置里加上babel-polyfill