前置知识(搭建脚手架)

• 脚手架搭建完成后 先关闭eslint插件(推荐)
• 到vue.config文件 module.exports 对象中 添加lintOnSave: false
• 接下来就可以在app.vue中运行代码
• 右键终端打开 输入 npm run serve将代码跑起来

首先先认识一下组件

组件的本质:

• 一个自定义标签
• 普通标签只有结构
• 而组件有结构(html) 样式(css) 和 交互(JavaScript)
• 一个组件相当于一个vue实例

组件的作用:

• 复用 :把页面上可重复使用的盒子封装成组件 从而提高代码的可维护性 和开发效率

单文件组件

• 把每一个组件放入一个独立的文件里
• 好处:便于维护 方便复用
• 组件的后缀名为.vue
• .vue文件由三个部分组成 :
• template:写html结构模板
• script : 写js业务逻辑 组件里的data methods 计算属性...都写在这里
• style: 这里写组件的css样式

组件使用教程

怎么注册局部组件

• 1.导入局部组件 ：在根组件的scrip中导入局部组件:import 组件名 from '组件路径'
• 2.挂载组件:在export default里面写一个属性components :{"标签名":组件名}
• 3.使用局部组件:挂载完以后 像标签一样使用即可(组件就是自定义标签)在html中创建标签:<组件名></组件名>

怎么注册全局组件

首先来说说局部组件与全局组件的区别

• 局部组件： 在哪里使用就在哪里调用（用一次 注册一次）
• 如果一个组件只在一两个页面使用 就可以用局部注册
• 全局组件： 在main.js中注册，任何地方都可以直接使用(注册一次，终身使用)
• 如果一个组件需要在很多页面使用 就可以全局注册
• 注册方法：创建一个mybutton.vue文件 到main.js中注册

//1.导入vue框架
import Vue from 'vue'
//2.导入App.vue根组件
import App from './App.vue'
//3.控制台打印提示开关
Vue.config.productionTip = false


/* 注册全局组件 ： 在main.js文件中 
1.导入组件
  import 组件名 from '组件文件路径'
2.注册全局组件
  Vue.component('标签名', 组件名)
一旦注册全局组件之后，可以在任何组件直接使用，并且不需要导入和挂载
*/
//1.导入组件
import global from './components/global.vue'
//2.注册全局组件
//参数1 ： 组件的id  （id叫什么，自定义标签名就叫什么）
//参数2 :  组件
Vue.component('test', global)


//4.创建vue实例
new Vue({
  //默认渲染App.vue组件(根组件)
  render: h => h(App),
}).$mount('#app')//设置挂载点,相当于 el:'#app'