使用vue -cli脚手架构建项目组件的全局注册与本地注册

全局注册

首先创建组件，然后在main.js下通过import导入你写好的vue组件，

用Vue.component(“注册组件名”,导入组件的对象)

最终的main.js代码

import Vue from 'vue'
import App from './App.vue'
import Header from './components/Header.vue'  //导入组件
import Content from './components/Conten.vue'
import Botton from './components/Botton.vue'// 全局注册了组件，
Vue.component('MyHeader',Header,);
Vue.component('MyContent',Content);
Vue.component('MyBotton',Botton);new Vue({el: '#app',render: h => h(App)
})

本地注册

直接在要使用vue文件中导入，然后在通过components属性注册。

<template><div id="app"><MyHeader></MyHeader><MyContent></MyContent><MyBotton></MyBotton></div>
</template><script>import MyHeader from './components/Header'
import MyContent from './components/Conten'
import MyBotton from './components/Botton'export default {name: 'app',data(){},components:{'MyHeader':MyHeader,'MyContent':MyContent,'MyBotton':MyBotton}
}
</script><style></style>

使用vue -cli脚手架构建项目组件的全局注册与本地注册相关推荐

vue CLI脚手架搭项目
1.安装 node.js环境官网下载:https://nodejs.org/en/download/ 一直默认就行,路径可以改变但要记得到安装完成后cmd打开终端,输入node -v ,npm - ...
猿创征文｜【Vue五分钟】 Vue Cli脚手架创建一个项目
目录前言一.创建项目的操作步骤选择路由模式选择CSS预编译器选择如何存放配置自动下载项目所需的包文件二.启动vue项目 1.项目目录 2.启动项目 3.浏览器打开项目首页界面三.项目的 ...
运用 Vue CLI4.X 脚手架构建项目实战
本文是我在学习过程中记录学习的点点滴滴,目的是为了学完之后巩固一下顺便也和大家分享一下,日后忘记了也可以方便快速的复习. 运用 Vue CLI4.X 脚手架构建项目实战前言一.什么是 Vue CL ...
Vue2.x 核心基础（Vue概述，Vue基本使用，@vue/cli脚手架，Element-UI 的基本使用，Vue模板语法）
1. Vue概述尤雨溪:Vue.js的创建者 2014年2月,Vue.js正式发布 2015年10月27日,正式发布1.0.0 2016年4月27日,发布2.0的预览版本 Vue:渐进式JavaSc ...
Vue 全家桶之 vue cli (脚手架)
一.Vue cli 简介 cli --------------------- c : command (命令) l : line ( 行 ) i : interface ( 接口 ) 命令行接口命令 ...
vue = 什么意思_记录使用@vue/cli搭建Vue3项目完整流程
最近发现vue两大UI框架Element UI和Ant Design Vue都已经支持Vue3了,如果再不学习Vue3就落伍了,此文章记录下使用@vue/cli搭建Vue3项目完整流程. 1 安装vu ...
cli vue 卸载_记录使用@vue/cli搭建Vue3项目完整流程
最近发现vue两大UI框架Element UI和Ant Design Vue都已经支持Vue3了,如果再不学习Vue3就落伍了,此文章记录下使用@vue/cli搭建Vue3项目完整流程. 1 安装vu ...
如何查看vue版本号以及vue/cli脚手架版本号
查看vue版本号方法一:直接在项目的package.json文件,找到dependencies就能看到了方法二:输入命令npm ls vue (或者npm list vue) 查看vue/cli脚 ...
Vue CLI 脚手架详解：快速构建 Vue.js 项目的利器
目录一.安装和创建项目二.项目结构三.开发和构建四.插件和配置 Vue CLI 是 Vue.js 官方提供的脚手架工具,它可以帮助开发者快速搭建 Vue.js 项目的基础结构,并提供了丰富的功 ...

使用vue -cli脚手架构建项目组件的全局注册与本地注册

全局注册

本地注册

使用vue -cli脚手架构建项目组件的全局注册与本地注册相关推荐

最新文章

热门文章