Javascript Vue组件库-Can';不能从地区进口
几天来,我一直在尝试安装Vue组件库。我已经阅读了一些教程,并通读了一些流行的现有UI库的代码。我的问题归结为: 我的库名为@company/vue components 我使用npm将我的库安装到项目中:Javascript Vue组件库-Can';不能从地区进口,javascript,vue.js,vue-component,rollupjs,Javascript,Vue.js,Vue Component,Rollupjs,几天来,我一直在尝试安装Vue组件库。我已经阅读了一些教程,并通读了一些流行的现有UI库的代码。我的问题归结为: 我的库名为@company/vue components 我使用npm将我的库安装到项目中: npm install @company/vue-components 然后,我尝试将我的库注册为Vue的插件: import Vue from 'vue'; import VueComponents from '@company/vue-components'; Vue.use(Vue
npm install @company/vue-components
然后,我尝试将我的库注册为Vue的插件:
import Vue from 'vue';
import VueComponents from '@company/vue-components';
Vue.use(VueComponents);
我尝试在vue cli生成的About.vue页面(称为EButton)中使用我的组件:
因此,我想我没有正确构建dist包,因为当我简单地使用“@company/vue components”时,就会引用dist包。如果我在控制台中打印每个变量,我可以看到分发包的导入不包括“安装”功能,但源导入包括:
以下是我能想到的所有相关源代码。这是使用vue sfc rollup cli工具和复制Buefy库设置的混合
EButton.vue
组件/index.js
src/index.js
rollup.config.js
package.json
经过几周的努力,我终于用Vue CLI工具重新启动了这个项目。使用vue cli service build命令按照我的需要构建库。完整命令:
vue-cli-service build --no-clean --target lib --name vue-components src/index.js
src/index.js在我上面的帖子中没有改变组件库
package.json
中的main
条目是什么?例如,这是Vuex软件包~很抱歉。我已经添加了package.json信息
[Vue warn]: Unknown custom element: <e-button> - did you register the component correctly? For recursive components, make sure to provide the "name" option
import VueComponents from '@company/vue-components/src/index';
<template>
<button class="button" v-bind="$attrs" v-on="$listeners">
<slot></slot>
</button>
</template>
<script>
export default {
name: 'EButton',
inheritAttrs: false
};
</script>
import EButton from './EButton.vue';
const Plugin = {
install(Vue) {
Vue.component(EButton.name, EButton);
}
};
let GlobalVue = null;
if (typeof window !== 'undefined') {
GlobalVue = window.Vue;
}
else if (typeof global !== 'undefined') {
GlobalVue = global.Vue;
}
if (GlobalVue) {
GlobalVue.use(Plugin);
}
export default Plugin;
export {
EButton
};
import EButton from './EButton';
export {
EButton
};
import * as components from './components/index.js';
const install = function(Vue) {
if (install.installed) {
return;
}
install.installed = true;
for (let name in components) {
Vue.use(components[name]);
}
};
const Plugin = { install };
let GlobalVue = null;
if (typeof window !== 'undefined') {
GlobalVue = window.Vue;
}
else if (typeof global !== 'undefined') {
GlobalVue = global.Vue;
}
if (GlobalVue) {
GlobalVue.use(Plugin);
}
export default Plugin;
import vue from 'rollup-plugin-vue';
import buble from 'rollup-plugin-buble';
import commonjs from 'rollup-plugin-commonjs';
import replace from 'rollup-plugin-replace';
import { terser } from 'rollup-plugin-terser';
import minimist from 'minimist';
const argv = minimist(process.argv.slice(2));
const baseConfig = {
input: 'src/index.js',
plugins: {
preVue: [
replace({
'process.env.NODE_ENV': JSON.stringify('production')
}),
commonjs()
],
vue: {
css: true,
template: {
isProduction: true
}
},
postVue: [
buble()
]
}
};
const external = [
];
const globals = {
};
const buildFormats = [];
if (!argv.format || argv.format === 'es') {
const esConfig = {
...baseConfig,
external,
output: {
file: 'dist/vue-components.esm.js',
format: 'esm',
exports: 'named',
globals
},
plugins: [
...baseConfig.plugins.preVue,
vue(baseConfig.plugins.vue),
...baseConfig.plugins.postVue,
terser({
output: {
ecma: 6
}
})
]
};
buildFormats.push(esConfig);
}
if (!argv.format || argv.format === 'cjs') {
const umdConfig = {
...baseConfig,
external,
output: {
compact: true,
file: 'dist/vue-components.ssr.js',
format: 'cjs',
name: 'VueComponents',
exports: 'named',
globals,
},
plugins: [
...baseConfig.plugins.preVue,
vue({
...baseConfig.plugins.vue,
template: {
...baseConfig.plugins.vue.template,
optimizeSSR: true
}
}),
...baseConfig.plugins.postVue
]
};
buildFormats.push(umdConfig);
}
if (!argv.format || argv.format === 'iife') {
const unpkgConfig = {
...baseConfig,
external,
output: {
compact: true,
file: 'dist/vue-components.min.js',
format: 'iife',
name: 'VueComponents',
exports: 'named',
globals,
},
plugins: [
...baseConfig.plugins.preVue,
vue(baseConfig.plugins.vue),
...baseConfig.plugins.postVue,
terser({
output: {
ecma: 5
}
})
]
};
buildFormats.push(unpkgConfig);
}
export default buildFormats;
{
"name": "@company/vue-components",
"version": "1.0.0",
"description": "",
"main": "dist/vue-components.ssr.js",
"module": "dist/vue-components.esm.js",
"unpkg": "dist/vue-components.min.js",
"files": [
"dist/*",
"src/**/*.vue",
"!src/lib-dev.vue"
],
"scripts": {
"build": "cross-env NODE_ENV=production rollup --config build/rollup.config.js",
"build:ssr": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format cjs",
"build:es": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es",
"build:unpkg": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife"
},
...
}
vue-cli-service build --no-clean --target lib --name vue-components src/index.js