# npm包版本發布、刪除教程
## 注冊npm賬戶并在本機添加npm用戶
- 進入https://www.npmjs.com/，注冊賬戶
- 打開終端，輸入npm login
- 輸入賬號名、密碼、郵箱，登錄成功后將添加至npm的本地配置中；
- 
## 創建npm包項目
1. 新建空文件夾，由于基于vue封裝插件，所以建議使用webpack-simple模版項目來開發， `vue init webpack-simple v-testnpm`
- 
1. cmd命令進入項目,并安裝依賴,運行模版
```
cd v-testnpm
npm install
npm run dev
```
1. 在根目錄下的src文件夾中創建lib文件夾，lib作為我們的插件目錄；
2. 在src/lib下編寫我們的插件v-testnpm.vue
```
<template>
<div>
<input type="text" v-model="text">
{{text}}
</div>
</template>
<script>
export default {
name: "v-testnpm",
data () {
return {
text: '測試'
}
}
}
</script>
<style scoped>
</style>
```
1. 在src/lib創建index.js
```
import vTestnpm from './v-testnpm.vue'
const comment = {
install: function(Vue) {
Vue.component(vTestnpm.name, vTestnpm)
}
}
// 這里的判斷很重要
if (typeof window !== 'undefined' && window.Vue) {
window.Vue.use(comment)
}
export default comment
```
2. 在main.js中引入我們的插件并注冊使用
```
import Vue from 'vue'
import App from './App.vue'
import vTestnpm from './lib/index';
Vue.use(vTestnpm);
new Vue({
el: '#app',
render: h => h(App)
})
```
1. 在App.vue中使用v-testnpm
```
<template>
<div id="app">
<v-testnpm></v-testnpm>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
}
}
}
</script>
```
2. 項目成功運行后，查看實際效果
1. 修改package.json文件
將private改為false,增加main,main是打包后的入口文件
1. 修改webpack.config.js文件
- entry：是入口文件，src目錄下插件lib的index.js文件
-filename：/打包后輸出的文件名字,這里需要和package.json文件下main應該寫為:'dist/v-testnpm.js'
1. 打包插件并上傳npm
```
npm run build
npm login
npm publish
```
--
最后我們在實際項目中，安裝自己的插件使用就可以了
