Vue中的UI组件发布至npm流程

本是古典何须时尚 2022-03-22 06:49 307阅读 0赞

本文提供的方式是将组件直接引入，不需要使用Vue.use()，即没有给组件添加install方法。

##### 步骤一 #####

注册npm账号，用于发布组件。

// 注册后
    npm adduser // 添加用户（填写注册的用户名，密码，邮箱）
    npm whoami // 查看当前注册的用户

附：

注册npm需要确认邮箱，邮箱确认后需要重新登录npm，否则会一直提示邮箱未确认。

##### 步骤二 #####

构建一个vue项目

vue init webpack-simple my-ui
    
    // 修改package.json
    "name": "my-ui",
    "main": "index.js",
    "private": false,
    "repository": {
    	"type": "git",
        "url": "https://github.com/.../.git"
    },

添加组件信息，目录结构如下图：  
![在这里插入图片描述][20190126173246264.png]

// index.js(将需要使用的组件导出)
    import Test from './src/components/Test'
    export {
      Test
    }
    
    // components/Test.vue
    <template>
      <div>
        <h1>{
       { msg }}</h1>
      </div>
    </template>
    
    <script>
    export default {
      name: 'Test',
      data () {
        return {
          msg: 'this is a test for my-ui'
        }
      }
    }
    </script>
    <style scoped>
    </style>

##### 步骤三 #####

将项目上传至github（原因：在使用npm install 将从github上下载）。

##### 步骤四 #####

发布：

npm login // 登录
    
    /**如果登录发现以下信息：
    Logged in as ... on https://registry.npm.taobao.org/.
    需要修改当前的镜像：
    输入：npm config set registry https://registry.npmjs.org/
    */
    
    npm publish // 发布至npm

##### 安装 #####

npm i -d my-ui
    
    // 使用
    ...
    <test></test>
    ...
    import { Test } from 'my-ui'
    export default {
    	components: {
    		Test
    	}
    }

附：

1.修改后重新上传至npm时需要修改package.json中的version字段，否则会上传失败。  
2.每次修改后需要重新将代码上传至github上。

[20190126173246264.png]: /images/20220322/9e14fd20d2c74a17accf023734981769.png