vue-cli构建项目中组件的使用
在使用vue-cli脚手架构建项目时,组件的使用步骤大致是:创建组件component,编写模板template,抛出组件给项目export,引入组件import,抛出组件给页面export。
一、创建组件
在componets文件夹里创建新的组件文件newVue.vue,注意后缀名为.vue
注意:组件名称不能使用html的自有标签或javascript的关键字,例如:head.vue,new.vue这样的组件名称是不符合规范的,加载的时候也会出现问题。
二、编写组件内的模板内容和样式
template是模板的意思,模板内容就是组件将展示的具体内容
<template> <div>这里是模板内容</div> </template>
<style scoped>
//这里可以编写样式
</style>
注意:模板内容只能有一个顶层html标签,例如:上面代码里将div作为顶层标签,那么所有的模板内容都必须写在这个div内部
三、抛出组件给vue项目
通过export将组件抛出给vue项目,并将组件命名为newVue
<template>
<div>这里是模板内容</div>
</template>
<script>
export default {
name: 'newVue'
}
</script>
<style scoped>
</style>
四、引入组件到主组件,并将引入的组件抛出给主组件
import newVue from '@/components/newVue'
通过import引入组件,再通过export将引入的组件抛出给主组件,抛出多个组件用逗号隔开即可
主组件就可以通过自定义标签调用:
<newVue></newVue>
<template> <div id="app"> <newVue></newVue> <router-view/> </div> </template> <script> import newVue from '@/components/newVue' export default { components:{ newVue } } </script>