1、使用vue脚手架vue-cli拉取项目

vue create vue-max

1、 拉取成功，如下图：

2、拉取项目成功后，执行cd vue-max / npm run serve启动项目, 如下图：

3、初始目录，如下图：

2、配置相关信息

1、创建vue.config.js文件，内容如下：

const path = require('path');
module.exports = {
    lintOnSave: false,
    pages: {
        index: {
            entry: 'src/main.js',
            template: 'public/index.html',
            filename: 'index.html'
        }
    },
    chainWebpack: config => {
        config.module.rule('js')
            .include
            .add(path.resolve(__dirname, 'packages')).end()
            .use('babel')
            .loader('babel-loader')
            .tap(options => {
                return options;
            });
        config.resolve.alias
            .set("@", path.resolve(__dirname, 'examples'));
    }
}

2、在项目根目录创建packages目录，用来存放自定义的ui组件，并在packages目录中创建index.js，引入自定义组件，并导出组件和intall方法， 如下图：

3、在入口文件src下面的main.js文件引入自定义组件包packages， 如下图：

4、修改package.json， 运行npm run lib ，即可编译生成代码， 如下图：

3、发布

1、修改package.json，将文件中的private 设置成false或者直接删除，才可以允许发布

2、在项目根目录创建 .npmignore 文件 ，忽略掉不发布的文件（原则上，只需要发布编译后的包lib、package.json、README.md文件），内容如下：

# 忽略目录
examples/
packages/
public/

# 忽略指定文件
vue.config.js
babel.config.js
*.map
.browserslistrc
.editorconfig
.eslintrc.js
babel.config.js
yarn.lock

3、注册npm

www.npmjs.com/

4、登录npm遇到的问题

• 1、注册后一定要进行邮箱验证，否则后面进行组件包发布时候会提示403错误；
• 2、安装默认cnpm需要切换到npm，如下图：

registry.npmjs.org/vue-mix-kan…

5、检查发布的包是否与已发布的名称冲突，Not found代表不冲突：

6、执行发布操作：