vue component developers to publish to the whole process npm

A: Project to build vue

　　Vue package insert with suitable webpack-simple, vue init webpack-simple <project-name>

Two: Create the component

　　Create a lib folder used to store different components in the src directory, and creating a folder for each component in the folder you want to publish a directory to store the components and the components for export index.js

NOTE: vue-tool.vue content codes are conventional vue

<template>
    <h1>标题组件</h1>
</template>

<script>
export default {
    name: "VueTool"
}
</script>

<style scoped>

</style>

　　index.js under test file in order to export components

// VueTool corresponding name of the component, vue-tool.vue remember the file name or attribute Oh 
Import from VueTool './vue-tool.vue'; 
VueTool.install Vue = => Vue.component (VueTool.name , VueTool); 
Export default VueTool;

　　If a plurality of other components above step is repeated as above huiming folders

Export all three components

Index.js created in the src directory as the file entry program, in index.js all export all the component code as follows

VueTool from Import './lib/test/index'; 
Import HmTest from './lib/huiming/index' 

// ... If there is, then continue to add? 

const Components = [ 
  VueTool, 
  HmTest 
  // ... ? If there is, then continue to add 
] 

const install = function (Vue, the opts = {}) { 
  components.map (the Component => { 
    Vue.component (component.name, the Component); 
  }) 
} 

/ * support the use of labels the introduction of way * / 
IF (typeof window == 'undefined' && window.Vue!) { 
  install (window.Vue); 
} 

Export {default 
  install, 
  VueTool, 
  HmTest 
  // ... If there is, then continue to add? 
}

　Four: modify the configuration file webpack.config.js focus on content for the red box contents

五修改package.json

六：测试组件

在发正式包之前可以在本地先打一个包，然后测试下有没有问题，如果没问题再发布到npm上。
首先，打包到本地
npm run build
npm pack
npm pack 之后，就会在当前目录下生成一个tgz 的文件。
打开一个新的vue项目，在当前路径下执行(‘路径’ 表示文件所在的位置)
npm install 路径/组件名称.tgz
然后，在新项目的入口文件（main.js）中引入

import 变量名 from '组件名称'

Vue.use(变量名)
七：发布

在前面测试组件可以正常使用后就可进行发布了

准备条件：在npm上注册好账号，并且邮箱通过验证

有了账号以后就可以进行发布了

1.npm login 输入账号，密码，邮箱

2.npm publish 回车就可以了

八：下载使用这就可以正常使用了

九：注，npm常用操作

npm config set registry https://registry.npm.taobao.org //设置淘宝镜像

npm config set registry http://registry.npmjs.org //设置官方镜像

npm config get registry //获取镜像地址

npm --force unpublish safe_manage_view //删除npm包

npm login //npm 登录

npm publish //npm 发布包

npm install --save hzm-npm-test //安装包

npm pack //打包

vue component developers to publish to the whole process npm

Guess you like