‘.vue’文件

• Vue自定义了一种后缀名名字为.vue文件,它将html, js, css 整合成一个文件,和里面 template script style三个区别分别依次对应。

  1 2 3 4 5 6 7 8 9 10

  <template> <!--这里写 html --> <template/> <script> export default {}; // 这里写js </script> <style lang = "less" scoped> <!--这里写css--> </style>

• 一个.vue 文件就等于单独组件。因为.vue文件是自定义的，浏览器不识别，所以要对该文件进行解析,在webpack构建中，需要安装vue-loader 对.vue文件进行解析。

• template里面最外层必须是只有一个容器
• script 中的 export default {} 即导出这个组件，外部可以引用。
• style 中的 lang 指额外表示支持的语言可以让编辑器识别,scoped 指这里写的css只适用于该组件。