Vue开发组件发布NPM踩坑之路

Vue开发组件发布NPM踩坑之路

1. 初始化项目

Vue create vue-progrect

2. 调整项目目录

1、src 目录调整为examples，用于展示组件实例
2、packages 新增packages文件夹，用于编写组件

3. 配置项目

在vue.config.js文件中配置（vue-cli3.0项目初始化时没有此文件，在src同 级目录下新建vue.config.js

问题1：src调整后，webpack变异报错，项目无法执行

moudle.exports = {
            // 修改src为examples
            pages: {
                index: {
                    entry: 'examples/main.js’, // 此处将src修改为
                    template: 'public/index.html',
                    filename: 'index.html'
                    }
             }
          }

问题2：将src修改为examples后，@符无法指向examples

	const path = require('path')
        const webpack = require('webpack')

        function resolve (dir) {
            return path.join(__dirname, dir)
        }
        moudle.exports = {
            // 修改src为examples
            pages: {
                index: {
                    entry: 'examples/main.js’, // 此处将src修改为
                    template: 'public/index.html',
                    filename: 'index.html'
                    }
             }，
            chainWebpack: config => {
                config.resolve.alias
                    .set('@', resolve('examples')); // 调整@指向examples
            },
          }

问题3：新增的packages文件夹默认webpack不会处理

	moudle.exports = {
            // 修改src为examples
            pages: {
                index: {
                    entry: 'examples/main.js’, // 此处将src修改为
                    template: 'public/index.html',
                    filename: 'index.html'
                    }
             }，
            chainWebpack: config => {
                config.resolve.alias
                    .set('@', resolve('examples')); // 调整@指向examples
                config.module
                    .rule(/\.jsx|.js$/) // 如果需要解析JXS语法添加解析JSX，如果不需要只写js
                    .include
                    .add('/packages’) // 添加packags文件夹，解析该文件夹下的组件
                    .end()
                    .use('babel')
                    .loader('babel-loader')
                    .tap(options => {
                        return options
                });
            },
          }

问题4：组件内style样式打包后不生效

	 moudle.exports = {
            // 修改src为examples
            pages: {
                index: {
                    entry: 'examples/main.js’, // 此处将src修改为
                    template: 'public/index.html',
                    filename: 'index.html'
                    }
             }，
            chainWebpack: config => {
                config.resolve.alias
                    .set('@', resolve('examples')); // 调整@指向examples
                config.module
                    .rule(/\.jsx|.js$/) // 如果需要解析JXS语法添加解析JSX，如果不需要只写js
                    .include
                    .add('/packages’) // 添加packags文件夹，解析该文件夹下的组件
                    .end()
                    .use('babel')
                    .loader('babel-loader')
                    .tap(options => {
                        return options
                });
            },
            css: {
                extract: false // 绑定css样式
            }
          }

4. 编写组件------在packages目录下编写组件

1、在packages目录下新建文件夹menu用于存放编写的组件

2、在menu目录下新建src文件夹，用于存放组件的源码

3、在menu目录下新建index.js文件，用于对外提供对组件的引用

// 导入组件，组件必须声明 name
        import Menu from './src/SideMenu'

        // 为组件提供 install 安装方法，供按需引入
        Menu.install = function (Vue) {
            Vue.component(Menu.name, Menu)
        }
        // 默认导出组件
        export default Menu

4、整合所有的组件，对外导出所有的组件，package/index.js

// 导入组件
import Menu from "./Menu/index.js";

// 存储组件列表
const components = [Menu];
// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
const install = function(Vue) {
    // 判断是否安装
    if (install.installed) return;
    // 遍历注册全局组件
    components.forEach(component => {
        Vue.component(component.name, component)
    });
};
// 判断是否是直接引入文件
if (typeof window !== "undefined" && window.Vue) {
    install(window.Vue);
}
export default {
    // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
    install,
    // 以下是具体的组件列表
    Menu
};

5. 编写示例

1、在示例examples文件夹中导入组件,在main.js中导入注册组件

    import Vue from 'vue'
        import App from './App.vue'
        import router from './router'
        import SideMenu from './../packages/index’ // 导入组件

        Vue.config.productionTip = false
        Vue.use(SideMenu) // 注册全局组件

        new Vue({
          router,
          render: h => h(App)
        }).$mount('#app’)

2、在页面中使用组件

<template>
    <side-menu baseUrl="wenba-slidebar-web.in_dev" class="home"/>
template>

6. 配置package.json

1、在scripts中新增一条命令npm run lib

“scripts”:{
    "lib": "vue-cli-service build --target lib --name menu --dest lib packages/index.js"
}
// target:构建目标，默认为应用模式。这里修改为 lib 启用库模式
// dest:  输出目录，默认 dist。这里我们改成 lib

2、 npm发布配置

{
“Name"：”menu"---包名，npm库中要唯一
“Version": “0.0.0"----每次发布的时候需要修改版本号，不能和历史版本相同
“description”:”菜单”—----对于包的描述
“private”:false ——私有化调整为false,必须调整
"main": "lib/SideMenu.umd.min.js” ---打包入口
"publishConfig" : { -----可以避免每次发包的时候都要登录
		"registry" : "https://registry.npmjs.org/“, ---仓库
  		"username": “uname”, ——用户名
 		 "password": “upwd”, ---密码
  		"email": “uemail@email.com” ---邮箱
	},
}

7. 发布

Npm login ——第一次发布的时候登录，以后就不需要啦
Npm publish

8. 在项目中使用组件

下载组件，使用组件仿照步骤五

Npm I menu