Vue2.0 从0到1开发组件库

1.使用下面的命令创建项目，选择default安装

vue create test-ui

2.将文件名src修改为examples，组件测试用例放在该文件夹下

3.在根目录添加vue.config.js

// vue.config.js 内容
​
const path = require('path');
​
module.exports = {
  pages: {
    index: {
      // 修改项目的入口文件
      entry: 'examples/main.js',
      template: 'public/index.html',
      filename: 'index.html'
    }
  },
​
  // 扩展 webpack 配置，使 packages 加入编译
  chainWebpack: config => {
    config.module
      .rule('js')
      .include.add(path.resolve(__dirname, 'packages')).end()
      .use('babel')
      .loader('babel-loader')
      .tap(options => {
        return options;
      })
  }
}    

4.根目录创建文件夹packages，目录结构如下

部分代码如下：

packages/button/index.js

import TButton from './src/button';
​
TButton.install = function (Vue) {
  Vue.component(TButton.name, TButton);
}
​
export default TButton;

packages/button/src/button.vue

<template>
<button class="t-button">
  <slot></slot>
</button>
</template>
​
<script>
export default {
  name: "tButton"
}
</script>
​
<style scoped>
.t-button{
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #ffffff;
  border: 1px solid #dcdfe6;
  color: #606266;
  -webkit-appearance: none;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  margin: 0;
  transition: 0.1s;
  font-weight: 500;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  padding: 12px 20px;
  font-size: 14px;
  border-radius: 4px;
}
.t-button:hover{
   color: #409eff;
   border-color: #c6e2ff;
   background-color: #ecf5ff;
 }
</style>

5.在packages文件夹下新建index.js

// package/indexjs 内容
import Button from '../packages/button';
import Input from './input';
​
const components = [
  Button,
  Input
]
​
// 注册全局组件
const install = function (Vue) {
  components.forEach(item => {
    Vue.component(item.name, item);
  })
}
​
// 判断是否直接引入文件，如果是，就不用调用Vue.use()
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)
}
​
export default {
  install,
  Button,
  Input
}

6.在根目录下的package.json文件中新增以下注释的代码

{
  "name": "test-ui",
  "version": "0.1.0",
  "main": "dist/test-ui.umd.js", // 添加main属性，修改文件入口
  "private": false, // 把"private": true 改成 "private": false
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "lib": "vue-cli-service build --target lib packages/index.js" // 新增 lib 命令
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-router": "^3.5.3"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.14",
    "@vue/cli-plugin-eslint": "~4.5.14",
    "@vue/cli-service": "~4.5.14",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

7.执行lib命令

npm run lib

打包成功后多出dist 文件

8.根目录下新增.npmignore

.npmignore 主要用于上传npm时需要忽略哪些文件，类似于 .gitignore。

代码如下：

#忽略目录
examples/
packages/
public/
​
​
#忽略指定文件
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
vue.config.js
babel.config.js
*.map

9.上传到npm

上传到npm里要确保npm的源是不是默认的，如果是淘宝或者其他的源，要改回来。

//查看npm源是否为默认源 https://registry.npmjs.org，执行以下命令：

npm config get registry

//如果不是，执行以下命令：

npm config set registry registry.npmjs.org

修改完之后，使用 npm login 登录一下，如果没账号的到npm上注册一个。

提示你输入 username、password 和 Email。

输入完之后 出现Enter one-time password from your authenticator app:。这时会把验证码发到你邮箱里，复制过来粘贴一下就好了。

登录成功之后，使用 npm publish 命令上传到npm中就收工了。