develop vue plug-ins to report errors
recently, there is a requirement that I want to encapsulate a set of components for internal use. General components are developed professionally through secondary encapsulation of iView. after I built the environment, I encapsulated an input component of iview, and there is no problem with local calls. After entering npm run build and npm pack, only one tgz package was generated locally, and then I introduced it in another project. As a result, the report was wrong. See below for details. Here, it is assumed that the project you encapsulate is A, and the project that introduces An is B.
components encapsulated in A
<template>
<Input class="fss-input" :placeholder="placeHolder"></Input>
</template>
<style lang="less" scoped>
.fss-input {
width: 200px;
}
</style>
<script>
import { Input } from "iview"
export default {
name: "fss-input",
props: {
placeHolder: {
type: String,
default: "..."
}
},
components: {
Input
}
}
</script>
the following is the code in A that wraps the above components to use as vue plug-ins
import FssInput from "./components/input"
const components = [
FssInput
]
//elementiview
const install = function(Vue, opts = {}) {
components.map(component => {
console.log("name", component.name)
Vue.component(component.name, component)
})
}
// auto install
if (typeof window !== "undefined" && window.Vue) {
install(window.Vue)
}
const API = {
install,
...components
}
module.exports.default = module.exports = API
B introduces A through npm install, and in order to introduce A components into B on demand, the following configuration is made
npm install babel-plugin-import --save-dev
// .babelrc
{
"plugins": ["import", {
"libraryName": "FssFrontComponent", //"fss-front-component"
"libraryDirectory": "src/components"
}]
}
the following is the code to introduce An into B
<template>
<div class="hello">
<fss-input></fss-input>
</div>
</template>
<script>
import { FssInput } from "fss-front-component"
export default {
name: "HelloWorld",
components: {
[FssInput.name]: FssInput
},
data () {
return {
placeholder: ""
}
}
}
</script>
report an error as shown in the following figure :
: