vue发布插件到npm源

注册npm

注册npm https://www.npmjs.com

创建vue空项目

• 创建一个基于element的组件，如count.vue文件

  <template>
      <div class="count">
            <el-button  @click="setVal(-1)"  type="primary">-</el-button>
            <span class="val">当前值:{{countVal}} </span>
             <el-button @click="setVal(1)"   type="primary">+</el-button>
      </div>
  </template>
  
  <script>
  import { ref } from 'vue'
  export default {
      name:'count',
      setup(){
          const countVal = ref(100);
          const setVal = val=>{
              countVal.value +=val;
          }
          return {
              countVal,
              setVal
          }
      }
  }
  </script>
  
  <style scoped lang="less">
  .count{
      display: inline-block;
      background-color: #ccc;
      .val{
          color: red;
          margin: 0 10px;
      }
  }
  </style>

• 创建一个入口文件，用于集成所有组件

  import Count from './components/count.vue';
  const components = [Count];
  const install = Vue=>{
      components.forEach(item=>{
          Vue.component(item.name,item)
      })   
  }
  export default install;

修改package.json文件配置

main为指向打包后的文件js；

name用于发布npm后，使用时import name from [来源的文件地址便是package.json打包时的文件名]；

version打包发布时的版本号，需要注意npm发布时不允许重复提交同一个版本号，所以每次修改都需要修改一次版本号；

private:false，private是true的时候不能发布到npm，需设置成false

"main": "dist/build.js",
"name": "vue1",
"version": "1.0.0",
"private": false,

vue3.x在package.json中配置打包命令

vue-cli-service build –target lib [集成所有组件的入口文件] –dest [打包后的文件夹名称] –name [打包后入口文件名]

"scripts": {
   "serve": "vue-cli-service serve",
   "build": "vue-cli-service build",
   "publish": "vue-cli-service build --target lib ./src/app.js --dest dist --name app"
 },

vue2.x最后修改webpack.config.js

const env = process.env.NODE_ENV;
module.exports = {
  entry: env==='development'?'./src/main.js':'./src/packages/btngroup/index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js',
    libraryTarget:'umd'
  }, 
  }

发布NPM

• 使用npm run build打包项目
• 首次运行npm login登录npm,会提示输入个人信息，Email是发布成功后，自动给这个邮箱发送一个邮件，通知发布成功，输入完，登录成功
• 运行 npm publish,发布成功。
• 自动给这个邮箱发送一个邮件，通知发布成功

使用

发布成功后，在npm网站上package中可以看到自己的发布的npm包

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import sVueComponents from 's-vue-components';
import 's-vue-components/dist/app.css';
createApp(App).use(router).use(ElementPlus).use(sVueComponents).mount('#app')

sVueComponents基于element，所以需要在use(elementPlus)后再使用sVueComponents

sVueComponents如果有自定义的样式，使用import ‘s-vue-components/dist/app.css’;此时s-vue-components可代表项目根目录

异常处理

• npm publish时，可能出现报错，大概意思是没有权限提交。造成的原因是当前插件的名字(package.json中的name值 )与现有平台的插件名字出现重复，当前无法提交。需要修改package.json中 name值，直到没有重复的名字即可