vue组件发布到npm

使用 webpack-simple 模板

2、新建一个 vue 项目

vue init webpack-simple

3、然后再 npm install 初始化一下依赖

4、在新建的项目的src目录下新建一个目录（components）用来存放所有自定义组件源码

src/components/button.vue

5、组件封装好后在组件目录（components）下新建一个index.js文件，为组件库的入口文件

src/components/index.js

6、导入封装的组件

<template>
  <h3>BUTTON</h3>
  <h4>{{value}}</h4>
</template>

<script>
export default {
  name: "ychbtn",
  data() {
    return {
      value: ''
    }
  },
  	
  // 通过refs访问到这个组件，就可以调用他的方法
  methods: {
    clearValue () {
      this.value = ''
    },

    setValue (value) {
      this.value = value
    }
  }
};
</script>

7、修改package.json文件

{
  "name": "test001", // 发布的模块名称，发布线上后，可以通过npm install test001来引用该模块
  "description": "A Vue.js project", // 组件库描述
  "version": "1.0.0", // 版本号
  "author": "yangchunhe <yangchunhe@creality.com>", // 作者
  "license": "MIT", // 代码授权许可
  "main": "dist/TestBtn.js", // 打包后的入口文件，若不配置，则在其他项目中就无法使用import xx from '包名'来引入组件，只能以包名作为起点来指定相对路径
  "private": false, // 公开项目，因为组件包是公用的，所以private要改为false
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {
    "vue": "^2.5.11"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
 
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "babel-preset-stage-3": "^6.24.1",
    "cross-env": "^5.0.5",
    "css-loader": "^0.28.7",
    "file-loader": "^1.1.4",
    "vue-loader": "^13.0.5",
    "vue-template-compiler": "^2.4.4",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  }
  
  "files": [ // 指定打包后发布到npm的文件，没指定则不传，package.json是默认上传的
    "dist",
    "src/components"
  ],
  
  "keywords": [ // 关键词，可以通过npm搜索你填写的关键词找到你的模块
    "ychbtn"
  ],
  
  "repository": { // 指定代码所在的仓库地址
    "type": "git",
    "url": "https://github.com/xx/xx-btn.git"
  },
}

8.修改webpack.config.js文件

const path = require('path')
const webpack = require('webpack')
module.exports = {
  entry: './src/components/index.js', // 文件打包的入口
  output: { // 修改输出文件到 dist 下
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'TestBtn.js', // 生成的文件名
    library: 'TestBtn', // 指定的就是你使用require时的模块名
    libraryTarget: "umd" // （必填！） 会生成不同umd的代码,可以只是commonjs标准的，也可以是指amd标准的，也可以只是通过script标签引入的
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ],
      },      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json']
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

9.编译打包，生成的文件在dist目录下

npm run build

10.测试插件

npm pack

npm pack 之后，会在当前目录下生成一个 test001-1.0.0.tgz 的文件。

打开一个vue项目，将压缩文件放到项目某个目录下，执行命令

npm install d\test001-1.0.0.tgz
路径是指压缩包所在的绝对路径，文件名必须是压缩包的全名

11.安装好插件后，在项目的入口文件main.js里引入使用

import TestBtn from "test001"
Vue.use(TestBtn)

12.在其他组件中使用

<template>
  <div>
    <h3>hhhh</h3>
      <!-- 这里的 ychbtn，指的是组件的名字（name: "ychbtn"） -->
    <ychbtn />  
  </div>
</template>

13.发布到npm

1、先到NPM官网注册账号，如果已有账号则跳过此步骤

2、在组件库项目的根目录下执行

npm login

3、登陆账号，输入你的账号和密码，并验证邮箱地址，登陆成功后则可以发布到NPM网站了

4、发布到npm官网

npm publish --access public

包名name在npm上已经存在了，换一个就好

将package.json中的name替换一个稍微自定义的名字即可。（test001替换为了test001-ych）

上传成功，接下来就可以在项目中正常下包使用 （npm intsall test001-ych）

箱地址，登陆成功后则可以发布到NPM网站了

4、发布到npm官网

npm publish --access public

包名name在npm上已经存在了，换一个就好

将package.json中的name替换一个稍微自定义的名字即可。（test001替换为了test001-ych）

[外链图片转存中…(img-KDR4rCpd-1616827757393)]

上传成功，接下来就可以在项目中正常下包使用 （npm intsall test001-ych）