大连 响应式网站推广项目的平台

注册npm账户并在本机添加npm用户

• 进入https://www.npmjs.com/，注册账户
• 打开终端，输入npm login
• 输入账号名、密码、邮箱，登录成功后将添加至npm的本地配置中；
• 

创建npm包项目

1. 新建空文件夹，由于基于vue封装插件，所以建议使用webpack-simple模版项目来开发， vue init webpack-simple v-testnpm

2. 

3. cmd命令进入项目,并安装依赖,运行模版

   cd v-testnpm
   npm install
   
   npm run dev
   

4. 在根目录下的src文件夹中创建lib文件夹，lib作为我们的插件目录；

5. 在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>
   

6. 在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
   

7. 在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)
   
   })
   

8. 在App.vue中使用v-testnpm

   <template><div id="app">
   <v-testnpm></v-testnpm>
   </div>
   
   </template>
   
   <script>
   
   export default {
   name: 'app',
   data () {
   return {
   }
   }
   
   }
   
   </script>
   

9. 项目成功运行后，查看实际效果
   

10. 修改package.json文件
    
    将private改为false,增加main,main是打包后的入口文件

11. 修改webpack.config.js文件

    

    • entry：是入口文件，src目录下插件lib的index.js文件
      -filename：/打包后输出的文件名字,这里需要和package.json文件下main应该写为:'dist/v-testnpm.js'

12. 打包插件并上传npm

    npm run build
    npm login
    
    npm publish
    

    最后我们在实际项目中，安装自己的插件使用就可以了