第三天课程下

1.项目目录介绍和运行流程

 工程化开发模式中：这里不再直接编写模板语法，通过 App.vue 提供结构渲染

        main.js文件

// 文件核心作用：导入App.vue，基于App.vue创建结构渲染index.html
// 1. 导入 Vue 核心包
import Vue from 'vue'

// 2. 导入 App.vue 根组件
import App from './App.vue'

// 提示：当前处于什么环境 (生产环境 / 开发环境)
Vue.config.productionTip = false

// 3. Vue实例化，提供render方法 → 基于App.vue创建结构渲染index.html
new Vue({
  // el: '#app', 作用：和$mount('选择器')作用一致，用于指定Vue所管理容器
  // render: h => h(App),
  render: (createElement) => {
    // 基于App创建元素结构
    return createElement(App)
  }
}).$mount('#app')

2.组件化开发和根组件

（1）template结构（只能有一个根节点）

（2）style样式

（3)script行为

3.普通组件的注册

（1）局部注册

（2）全局注册

main.js中

// 进行全局注册 → 在所有的组件范围内都能直接使用

// Vue.component(组件名，组件对象)

Vue.component('HmButton', HmButton)