1.1 Vue组件的命名
组件名必须多词格式，采用多词格式或中间加"-"；根组件App.vue是特殊组件，采用了单词命名。
<template>
<div>
<h3>组件命名：多词格式。具体来说三种写法：</h3>
<ul>
<li>小峰： abcDef.vue</li>
<li>大驼峰：AbcDef.vue</li>
<li>中横袋： abc-def.vue</li>
</ul>
<p>补充：如果文件名不是多词格式，可以在js代码中，指定name，name是多词格式也可以</p>
</div>
</template>
<script>
export default {
name:'abc-def'
}
</script>
<style lang="scss" scoped></style>
1.2 Vue组件的组成部分
1.2.1 Vue组件的模版创建
因为有vue代码高亮插件，输入vbase按回车，可以快速创建模版
<template>
<div>
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
</style>
1.2.1 Vue组件的组成部分
<template>
<!-- 使用vbase进行代码提示 -->
<div> // template只能有一个根元素
</div>
</template>
<script>
// vue代码都要写到默认导出对象里面
export default {
name:'xxx',
data() { // data要写成函数形式，在函数中返回一个对象
return {
name:'xx'
}
},
mothods: {},
computed: {},
watch: {},
created() {},
mounted() {}
}
</script>
<style lang="scss" scoped>
/* 让style支持less
1. 给style加上 lang="less"
2. 安装依赖包 less less-loader
npm i less less-loader -D
yarn add less less-loader -D (开发依赖)
*/
</style>
