VUE学习笔记--组件

文章目录

    • 组件化开发
    • vue组件的三个组成部分
    • 启用less
    • 组件之间的父子关系
    • 使用组件
    • 路径提示插件
    • 注册私有组件
    • 注册全局组件
    • 快速生成vue代码框架插件
    • 自动闭合标签插件


组件化开发

请添加图片描述
VUE学习笔记--组件_第1张图片

vue组件的三个组成部分

VUE学习笔记--组件_第2张图片
VUE学习笔记--组件_第3张图片
VUE学习笔记--组件_第4张图片
请添加图片描述
VUE学习笔记--组件_第5张图片
template中只能有一个根元素

启用less

VUE学习笔记--组件_第6张图片
VUE学习笔记--组件_第7张图片

组件之间的父子关系

VUE学习笔记--组件_第8张图片

使用组件

VUE学习笔记--组件_第9张图片
VUE学习笔记--组件_第10张图片
VUE学习笔记--组件_第11张图片

路径提示插件

请添加图片描述
@为src所在的路径位置,即@为src
该插件的配置
在vscode的设置中配置

	//导入文件时是否携带文件拓展名
    "path-autocomplete.extensionOnImport": true,
    //配置@的路径提示
    "path-autocomplete.pathMappings": {
        "@":"${folder}/src"
    },

VUE学习笔记--组件_第12张图片

注册私有组件

VUE学习笔记--组件_第13张图片

注册全局组件

VUE学习笔记--组件_第14张图片

快速生成vue代码框架插件

请添加图片描述

自动闭合标签插件

自动补全导入自定义组件使用时候的标签
请添加图片描述

你可能感兴趣的:(javascript,nodejs,node.js)