手把手搭建自己的UI库

Git UI NPM

 2018/06/23 

在 github 建立一个云端仓库

右上角+号New repository，比如我在自己的shenyizhou账号下建了一个zy-ui仓库，默认不用 README.md

用 vue-cli 初始化一个本地仓库

vue init webpack-simple zy-ui按自己需求填写

然后进项目yarn或npm i安装依赖

与云端的 Git 仓库建立关联

进入项目运行以下命令：

git init

git add .

git commit -m "init 1.0.0"

git remote add origin https://github.com/shenyizhou/zy-ui.git

git push origin master

注意:

git remote add origin https://github.com/shenyizhou/zy-ui.git只能运行一次，如果关联错了，请删除项目文件夹下的隐藏文件夹.git，重新运行git remote add命令。
git log --pretty=online可以看提交的 commit id，--pretty=online参数将 commit 信息都显示在一行。
git reset --hard commit id 设置版本回退到 commit id 对应的版本。
如果报could not resolve host: github.com错误，在 hosts 文件底部添加192.30.253.112 github.com。
如果是 github Group 开发，git push报 403 没有权限的错误，请把 Group 角色的Member权限改为Owner权限。

修改 Webpack 配置文件

Webpack 是用来将 Vue 组件打包成 JS 的重要工具，也能支持热重载。

修改webpack.config.js文件，把生成文件名即配置output中的filename改为zy-ui.min.js：

entry: './src/main.js', // 入口文件名
output: {
  path: path.resolve(__dirname, './dist'),
  publicPath: '/dist/',
  // filename: 'build.js'
  filename: 'zy-ui.min.js'
},

修改入口文件

Webpack 的入口文件也就是我们要执行的语句和生成的组件，之后也将写入package.json的main字段中作为 NPM 的入口。

修改入口文件./src/main.js（例子是将 label 和 input 组合的ZyInputGroup组件）：

import InputGroup from "./input-group/index.js";

// 所有组件的数组，暂时只有1个组件
const components = [InputGroup];

// 组件的公开install方法，会在Vue.use()的时候被调用
const install = function(Vue) {
  components.map(component => {
    Vue.component(component.name, component);
  });
};

// 直接引入zy-ui.min.js时的加载方式
if (typeof window !== "undefined" && window.Vue) {
  install(window.Vue);
}

export default {
  version: "1.0.0",
  install,
  InputGroup
};

这里一开始仿照 ElementUI 用了module.exports = {}的写法，但是import和module.exports无法用在同一个文件中，最后改为ES6 Module的写法。

配置就到此完毕，等写好组件运行yarn build或npm run build命令，Webpack 就会帮我们打包生成zy-ui.min.js啦。

编写组件

在 src 中建立 input-group 文件夹，并创建index.js（也就是被上文的main.js所引入的文件）：

import Component from "./input-group";

Component.install = function(Vue) {
  Vue.component(Component.name, Component);
};

export default Component;

并创建input-group.vue（也就是我们这次要写的组件）：

<template>
  <label class="input-group">
    <span class="input-group-label">{{label}}</span>
    <input :value="value"
      @input="handleInput"
      @compositionstart="stopInput"
      @compositionend="continueInput"
      ref="input"
      type="text">
  </label>
</template>

<script>
export default {
  name: 'zy-input-group', // 组件名，便于调试
  props: {
    label: String,
    value: String,
  },

  data() {
    return {
      isComposition: false, // 是否在输入法拼写中
    };
  },

  methods: {
    handleInput(event) {
      if (this.isComposition) {
        return;
      }
      // event为事件，event.target为事件对象，在这里即为目标input，
      // event还有个类似的属性srcElement即事件源，但是FireFox没有
      // srcElement，所以只能用target
      this.$emit('input', event.target.value);
    },

    // 当使用中文输入法，在拼写的时候屏蔽输出
    stopInput() {
      this.isComposition = true;
    },

    // 在拼写完毕后重新允许输出
    continueInput(event) {
      this.isComposition = false;
      this.handleInput(event);
    },
  },
};
</script>

<style lang="sass" scoped>
.input-group
  display: flex
  align-items: center
  margin-bottom: 8px

  &-label
    min-width: 40px
    margin-right: 8px
    font-size: 14px

  input
    flex: 1
    padding: 2px 4px
    line-height: 22px
    border: 1px solid #999
    border-radius: 4px

</style>

到此为止组件就算创建完成啦，运行yarn build命令就会生成zy-ui.min.js，然后在 HTML 页面中引入就 OK 啦。

这时候如果报Node Sass could not find a binding for your current environment: Windows 64-bit with Node.js 8.x错误，说明node-sass版本与当前环境不匹配，可以在项目下运行npm rebuild node-sass命令解决。

测试组件

直接引入 zy-ui.min.js 测试

将根目录的index.html改为：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>zy-ui</title>
</head>

<body>
  <div id="app">
    <zy-input-group :label="label" :value="input" @input="handleInput"></zy-input-group>
  </div>
  <!-- 一定要先引入vue，不然zy-ui安装不了，这里使用cdn加速 -->
  <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
  <!-- 需要相对路径，/dist/zy-ui.min.js 会定位到 file:///D:/dist/zy-ui.min.js -->
  <script src="./dist/zy-ui.min.js"></script>
  <script>
    // 扩展构造器
    const example = Vue.extend({
      name: 'example',
      data() {
        return {
          label: 'Hello',
          input: 'zy',
        }
      },
      methods: {
        handleInput(value) {
          console.log(value);
        }
      },
    });
    // 挂载到app标签上
    new example().$mount('#app');

  </script>
</body>

</html>

最后用yarn build命令生成zy-ui.min.js，再在页面上测试。

使用 Webpack 实时预览

使用yarn dev或npm run dev命令，访问http://localhost:8080/，修改组件内容就能实时在页面上看到效果。

上传到 NPM

先在package.json中添加或修改字段（NPM 会使用这些字段）：

"main": "dist/zy-ui.min.js",
"private": false,
"repository": {
  "type": "git",
  "url": "git+https://github.com/shenyizhou/zy-ui.git"
},

其中：

mian指定入口文件，即项目的入口。
private默认是 true 私人的，需要改为 false，不然会无法发布。
repository指定代码存放地址。

接下来注册一个 NPM 账号，有以下两种方式：

官网注册。
npm adduser 命令。

首次上传操作前需要输入npm login登录，按照提示输入用户名、密码和邮箱。

如果遇到npm ERR! no_perms Private mode enable, only admin can publish this module:问题，重新设为原来的镜像npm config set registry=http://registry.npmjs.org。

最后一个简单的上传命令npm publish就 OK 啦。

如果提示创建名有类似或已存在，只要修改package.json中的name即可。

其他配置

代码格式

可以在根目录中添加.prettierrc.json：

{
  "semi": true, // 有行尾分号
  "singleQuote": true, // 使用单引号
  "trailingComma": "all", // 有尾逗号
  "bracketSpacing": false, // { x } 有空格
  "jsxBracketSameLine": true, // <>标签的>不换行
  "arrowParens": "always" // 箭头函数参数加括号 (x) => {}
}

并在Visual Studio Code中添加Prettier - Code formatter插件，并修改以下首选项的设置便可以在相应时点自动格式化：

"editor.formatOnPaste": true,
"editor.formatOnSave": true,
"[vue]": {
  "editor.formatOnSave": true
},

原文作者：Yizhou Shen

原文链接：http://shenyizhou.github.io/2018/06/23/2018-6-23-%E6%89%8B%E6%8A%8A%E6%89%8B%E6%90%AD%E5%BB%BA%E8%87%AA%E5%B7%B1%E7%9A%84UI%E5%BA%93/

发表日期：June 23rd 2018, 2:44:13 pm

更新日期：September 6th 2023, 3:04:23 pm

Next Post

Grunt初探
Previous Post

Webpack入门

CATALOG

1. 在 github 建立一个云端仓库
2. 用 vue-cli 初始化一个本地仓库
3. 与云端的 Git 仓库建立关联
4. 修改 Webpack 配置文件
5. 修改入口文件
6. 编写组件
7. 测试组件
1. 7.1. 直接引入 zy-ui.min.js 测试
2. 7.2. 使用 Webpack 实时预览
8. 上传到 NPM
9. 其他配置
1. 9.1. 代码格式