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

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

创建组件

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

vue init webpack-simple

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

npm installnpm 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/directorynpm login

接着发布组件：

npm publish

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

删除包

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

npm unpublish --force your-component-name

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

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

rm ~/.npmrc

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

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

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