使用npm上传vue组件

1、搭建vue脚手架项目

执行：npm install -g @vue/cli ，安装完成后，执行 vue create 项目名
安装后项目结构如下：

2、本地调试

在App.vue中直接引入本地的组件

3、本地组件测试没问题,改造成vue插件类型的

1、在组件的文件夹下创建一个index.js文件

2、在与src下创建一个index.js的文件

4、修改配置文件

（1）、修改package.json文件

{
    "name": "zdy-progress",
    "description": "自定义进度条",
    "version": "1.0.0",
    "author": "YoLinDeng",
    // 开源协议
    "license": "MIT",
    // 因为组件包是公用的，所以private为false
    "private": false,
    // 配置main结点，如果不配置，我们在其他项目中就不用import XX from '包名'来引用了，只能以包名作为起点来指定相对的路径
    "main": "dist/maucash.js",
    "scripts": {
        "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
        "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
    },
    "dependencies": {
        "core-js": "^2.6.5",
        "vue": "^2.6.10"
    },
    // 指定代码所在的仓库地址
    "repository": {
        "type": "git",
        "url": ""
    },
    // 指定打包后,包中存在的文件夹
    "files": [
        "dist",
        "src"
    ],
    // 指定关键词
    "keywords": [
        "vue",
        "progress",
        "code",
        "progress code"
    ],
    // 项目官网的地址
    "homepage": "",
    "devDependencies": {
        "@vue/cli-plugin-babel": "^3.9.0",
        "@vue/cli-plugin-eslint": "^3.9.0",
        "@vue/cli-service": "^3.9.0",
        "babel-eslint": "^10.0.1",
        "eslint": "^5.16.0",
        "eslint-plugin-vue": "^5.0.0",
        "vue-template-compiler": "^2.6.10"
    },
    "eslintConfig": {
        "root": true,
        "env": {
            "node": true
        },
        "extends": [
            "plugin:vue/essential",
            "eslint:recommended"
        ],
        "rules": {},
        "parserOptions": {
            "parser": "babel-eslint"
        }
    },
    "postcss": {
        "plugins": {
            "autoprefixer": {}
        }
    },
    "browserslist": [
        "> 1%",
        "last 2 versions"
    ]
}

（2）、修改.gitignore文件

因为要用dist文件夹，所以在.gitignore文件中把dist/去掉。

（3）、修改webpack.config.js文件

var path = require('path')
var webpack = require('webpack')
const NODE_ENV = process.env.NODE_ENV;

module.exports = {
  entry: NODE_ENV == 'development' ? './src/main.js' : './src/index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'maucash.js',
    library: 'maucash',
    libraryTarget: 'umd',
    umdNamedDefine: true
  }
}  
 

5、本地测试

1、本地打包

执行npm run build  、 npm pack   本地生成一个zdy-progress-1.0.1.tgz的包

2、本地测试(在别的项目中)

npm install 路径/zdy-progress-1.0.1.tgz

3、在本地项目的main.js中

import ZdyProgress from 'zdy-progress';

Vue.use(ZdyProgress);

4、在需要使用的地方引用

5、本地测试没问题就可以发布到npm上

 

 

6、发布到npm上(注意镜像地址要指向npm的地址，如果其他镜像，先set回npm镜像)

执行 npm login   npm adduser  npm publish