新建一个后缀为vue的文件
<template>
<div> 组件样式</div>
</template>
<script>
import vIfVue from './vue-2.6.11/test/weex/cases/recycle-list/v-if.vue'
// 组件数据交互
export default {
}// 简写模式
// 完整模式
// export default Vue.extend({})
// export default 这是模块的默认暴露
</script>
<style>
/* 组件样式 */
</style>
main.js>app.vue>其它组件
- main.js是创建vue构造函数,然后把总组件app装到模板里面,再确定是哪个容器渲染
- app.vue 的顶级组件,包含所有的子组件,子组件都要配置到这里
main.js
import APP from './app.vue' //导入app组件,组件命名为APP
new Vue({
el:'root',//服务的容器
template:'<app></app>',//模板,有template要替换容器的HTML元素根路径
components:{APP}//配置组件
})
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="root"></div>// 这个会被替换为<app></app>,因为main文件配置了template
</body>
</html>