本文共 1710 字，大约阅读时间需要 5 分钟。

npm 如何发布和使用自定义组件

创建组件

首先得搭建一个简单的项目，用 vue init 创建一个基于 webpack-simple 的项目。运行以下命令：

vue init webpack-simple

安装依赖并启动开发服务器：

npm install
npm run dev

接下来，创建你需要的组件文件。我假设创建了 table 和 table-col 两个组件。组件文件的结构大致如下：

├── x-table.vue
├── x-table-col.vue
└── index.js

在 x-table.vue 中，定义你的组件逻辑，并在 index.js 中将组件导出供使用：

export default {
  xTable: {
    install(Vue) {
      Vue.component('x-table', xTable);
    }
  }
};

为了方便快捷，建议将所有组件放在同一目录下，在 index.js 中导入并暴露出来：

import xTable from './x-table.vue';
import xTableCol from './x-table-col.vue';
const components = [xTable, xTableCol];
export default {
  install(Vue) {
    components.forEach(component => {
      if (!Vue.component(component.name)) {
        Vue.component(component.name, component);
      }
    });
  }
};

修改 webpack.config.js 文件，确保正确输出结构：

const NODE_ENV = process.env.NODE_ENV;
module.exports = {
  entry: NODE_ENV === 'development' ? './src/main.js' : './src/lib/index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    library: 'npm-zujiandemo',
    libraryTarget: 'umd',
    umdNamedDefine: true
  },
  ...
};

最后，修改 package.json 文件，将 private 设为 false：

{
  "private": false,
  "main": "dist/npm-zujiandemo.js"
}

完成代码编写后，运行打包命令：

npm run build

再制作压缩插件包：

npm pack

复制出来的压缩文件可以直接安装到需要的地方：

npm install 组件项目打包后的本地绝对路径和文件全名

安装成功后，引入到项目中：

import npmZujiandemo from 'npm-zujiandemo';
Vue.use(npmZujiandemo);

这时候你就可以在 Vue 项目中使用这些自定义组件了。

上传组件

首先，申请一个 npm 账号。进入官方网站注册。

在组件文件目录中登录：

cd /path/to/your/component/directory
npm login

接着发布组件：

npm publish

发布后可以通过 npm search 查找你的组件。

删除包

如果想删除已发布的组件，可以用以下命令：

npm unpublish --force your-component-name

npm 登录报错账号或密码错误

如果登录时遇到问题，删除 ~/.npmrc 文件：

rm ~/.npmrc

这样 npm 会根据默认配置重新读取信息。

整个流程完成！希望这些步骤能帮到你。

转载地址：http://kkotz.baihongyu.com/