从 vuejs 组件创建 npm 包并在本地测试的正确方法是什么

Question

首先，我从 vue-cli 搭建了一个 vuejs 项目作为测试容器。 然后我从本地环境中的一个Vuejs组件创建一个npm包"vue-npm-example"并导入到上面的测试项目中。

包装内，

我跑了npm link，在项目中我跑了npm link vue-npm-example，

例子.vue

<template>
    <div id="vue-npm-example">
        <h1>{{ msg }}</h1>
    </div>
</template>

<script>
    export default {
        name: 'vue-npm-example',
        data() {
            return {
                msg: "Welcome to Your Vue.js App"
            }
        },
        mounted() {
            console.log('this is in compoennt file')
        }
    };
</script>

<style lang="scss">
</style>

main.js

import Example from './components/Example.vue'
export function install(Vue, options) {
    options = {
        installComponents: true
      }
    if (options.installComponents) {
        Vue.component('vuejs-example', Example)
    }    
}
export default Example

webpack.config.js

let path = require('path')
let webpack = require('webpack')
function resolve (dir) {
    return path.join(__dirname, '..', dir)
  }

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        publicPath: '/dist/',
        filename: 'index.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'vue-style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.scss$/,
                use: [
                    'vue-style-loader',
                    'css-loader',
                    'sass-loader'
                ]
            },
            {
                test: /\.sass$/,
                use: [
                    'vue-style-loader',
                    'css-loader',
                    'sass-loader?indentedSyntax'
                ]
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {
                        // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
                        // the "scss" and "sass" values for the lang attribute to the right configs here.
                        // other preprocessors should work out of the box, no loader config like this necessary.
                        'scss': [
                            'vue-style-loader',
                            'css-loader',
                            'sass-loader'
                        ],
                        'sass': [
                            'vue-style-loader',
                            'css-loader',
                            'sass-loader?indentedSyntax'
                        ]
                    }
                    // 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.common.js',
            '@': resolve('src')
        },
        extensions: ['*', '.js', '.vue', '.json']
    },
    devServer: {
        historyApiFallback: true,
        noInfo: true,
        overlay: true
    },
    performance: {
        hints: false
    },
    devtool: '#eval-source-map',
    node: {
        fs: 'empty'
    },
    watch: true
}

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
        })
    ])
}

然后在测试项目中 我愿意

import Vue from 'vue'
import Example from 'vue-npm-example'
Vue.component('example', Example)

并像使用它

<example></example>

我收到错误：

[Vue warn]: Failed to mount component: template or render function not defined.

我在 webpack 配置文件中为包和项目设置了 vue 别名。包被正确拉入，因为当我在包的 main.js 中执行 console.log() 时，它会登录测试项目。但是无论我怎么尝试，包中的组件在测试项目中仍然无法工作。

有什么建议吗？

Answer 1

npm link 创建一个符号链接，但是在导入本地npm包时，我需要指定包的完整地址。就我而言，我必须从'custom-component` 执行import customComponent from './node_modules/custom-component/dist/index.js' import customComponent。

Answer 2

我会改用npm pack（使用npm link 在本地测试你的npm 包的一些缺点：https://blog.vcarl.com/testing-packages-before-publishing/）

包装内

运行npm pack

在项目中

运行npm install (path-to-package)/package-name-0.0.0.tgz

然后在您的main.js 中导入/安装包：

import MyPackage from 'package-name'

// This runs your 'install' method which registers your component globally with Vue.component(...)
Vue.use(MyPackage);

一些有用的链接

为 npm 打包 Vue 组件：https://vuejs.org/v2/cookbook/packaging-sfc-for-npm.html

Vue npm 演练：https://www.telerik.com/blogs/vuejs-how-to-build-your-first-package-publish-it-on-npm

全局组件注册：https://vuejs.org/v2/guide/components-registration.html#Global-Registration