小编给大家分享一下vue怎么使用脚手架vue-cli创建并引入自定义组件，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！
一、创建并引入一个组件
1、创建组件
vue-cli中的所有组件都是存放在components文件夹下面的，所以在components文件夹下面创建一个名为First.vue的自定义组件：
<template>
<div>
<h2>{{msg}}</h2>
</div>
</template>
<script>
// 1、export 表示导出,在自定义组件里面使用export default导出
export default {
// name 表示设置别名，可以不设置，建议和组件的名称一致
name:"First",
data(){
return{
msg:"First Vue"
}
}
}
</script>
2、在App.vue组件里面引用First.vue组件
1、在<script>标签里面使用import导入自定义的标签：
// 1、导入自定义组件 First即First.vue组件里面设置的name值 import First from "./components/First"
2、在export里面添加自定义组件：
// 2、添加自定义组件
components:{
First
}
3、在<template>标签里面引入自定义组件：
<template> <div id="app"> <img src="./assets/logo.png"> <!-- <router-view/> --> <!--3、引用自定义组件--> <First></First> </div> </template>
完整代码如下：
<template>
<div id="app">
<img src="./assets/logo.png">
<!-- <router-view/> -->
<!--3、引用自定义组件-->
<First></First>
</div>
</template>
<script>
// 1、导入自定义组件 First即First.vue组件里面设置的name值
import First from "./components/First"
export default {
name: 'App',
// 2、添加自定义组件
components:{
First
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
效果：
二、引入嵌套组件
在上面的示例中，只是在App.vue中引入了单一的组件，如何引入嵌套组件呢？即First.vue组件里面又引用了自定义组件，这时该如何在App.vue组件里面引入呢？
1、先定义Second.vue自定义组件：
<template>
<div>
<h2>{{secondMsg}}</h2>
</div>
</template>
<script>
export default {
// name 表示设置别名，可以不设置，建议和组件的名称一致
name :"Second",
data(){
return{
secondMsg:"Second vue"
}
}
}
</script>
2、在First.vue组件中引用Second.vue组件
在First.vue中引用Second.vue组件和在App.vue中引入First.vue组件是一样的，完整代码如下：
<template>
<div>
<h2>{{msg}}</h2>
<!--3、引用second.vue组件-->
<Second></Second>
</div>
</template>
<script>
// 1、使用import导入Second.vue
import Second from './Second';
// export 表示导出
export default {
// name 表示设置别名，可以不设置，建议和组件的名称一致
name:"First",
data(){
return{
msg:"First Vue"
}
},
// 2、添加自定义组件组件
components:{
Second
}
}
</script>
3、在App.vue中引入嵌套组件
First.vue中引入了Second.vue组件以后，可以把First.vue组件看成是一个组件了，所以在App.vue中引入的时候代码是一样的：
<template>
<div id="app">
<img src="./assets/logo.png">
<!-- <router-view/> -->
<!--3、引用自定义组件-->
<First></First>
</div>
</template>
<script>
// 1、导入自定义组件 First即First.vue组件里面设置的name值
import First from "./components/First"
export default {
name: 'App',
// 2、添加自定义组件
components:{
First
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
4、效果
看完了这篇文章，相信你对“vue怎么使用脚手架vue-cli创建并引入自定义组件”有了一定的了解，如果想了解更多相关知识，欢迎关注云搜网行业资讯频道，感谢各位的阅读！
