Vue rookie questions about the introduction of vantUI components.
this rookie newly built project, wanted to try the vue component, chose vantUI as the component development. Refer to the official API documentation for component introduction configuration, but I don"t know which step was ignored and an error was reported during the introduction process.
< hr >
error message:
did you register the component correctly? For recursive components,
make sure to provide the "name" option.
I really can"t figure out what the problem is. According to the step-by-step configuration of the official documentation, all three methods have been tried.
the official document is a bit fraudulent. You can see that the official DEMO, also needs to register components
.
components:{
[Button.name]: Button,
...
},
add a vue.use (Button)
The
problem is solved, because I only use the button component on the page, so just use that reference and add
to the main.js.
import { Button } from 'vant';
Vue.use(Button);
A friend mentioned directly
before.
import Vant from 'vant';
import 'vant/lib/vant-css/index.css';
Vue.use(Vant);
it doesn't work even if I've tested it, because vant will report an error in Vant is not defined. If you want to reference other components, just add them in curly braces. Only if the installation uses babel-plugin-import
first picture, add a sentence
export default{
components:{
Button,
},
// ...
}
it's not that complicated. Add
to the entry file main.js.
import Vant from 'vant';
import 'vant/lib/vant-css/index.css';
Vue.use(Vant);
Just use the component directly on the
page.
see the official document https://youzan.github.io/vant." Quick start-way 3 ". In addition, the step-based description of github is really awkward. It has been submitted to commit
method 3. Import all components
configure the babel-plugin-import plug-in in a way that will not allow all components to be imported
import Vue from 'vue';
import Vant from' vant';
import 'vant/lib/vant-css/index.css';
Vue.use (Vant);
I just encountered the same problem. I can't quote it according to the official document. I didn't expect that there is a hole in the official document
do not configure the babel-plugin-import plug-in. After installation, it cannot be imported globally. Just uninstall npm uninstall i babel-plugin-import-D that is already installed.
