工程化开发

基本介绍 Vue CLI是Vue官方提供的一个全局命令工具可以帮助我们快速创建一个开发Vue项目的标准化基本架子。【集成webpack配置】 使用步骤 1.全局安装（一次）：yarn global add @vue/cli 2.查看Vue版本：vue --version 3. 创建项目架子：vue create project-name 4. 启动项目：yarn serve或npm run serve

注：除第一次外都只需3、4步骤

脚手架目录文件介绍和项目运行流程

项目相关代码简介

//文件核心作用，导入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({
  render: h => h(App),
}).$mount('#app')//和el作用一致

项目运行流程

组件化开发和根组件

组件化：一个页面可以拆分一个个组件，每个组件有着自己独立的结构、样式、行为为满足复杂化开发

可以将一个页面分为不同的组件，例如：头部组件，主体组件，底部组件等每个组件中都含有自己独立的结构、样式、行为

组件分类：普通组件、根组件

根组件整个应用最上层的组件，包裹所有普通小组件（APP.vue)

APP.vue

三部分组成

template:结构
script:js逻辑
style:样式

普通组件的注册使用

1.局部注册：只能在注册的组件内使用

创建.vue文件（三个组成部分）
在使用的组件内导入并注册

2.全局注册：所有组件内都能使用

使用：当成html标签使用<组件名></组件名> 注意：组件名规范->大驼峰命名法

局部注册

头部

<template>
  <div class="hm-header">
    我是hm-header
  </div>
</template>

<script>
export default {

}
</script>

<style>
.hm-header{
    height: 100px;
    line-height: 100px;
    text-align: center;
    font-size: 30px;
    background-color: blueviolet;
    color: white;

}
</style>

身体

<template>
  <div class="hm-main">
    我是hm-main
  </div>
</template>

<script>
export default {

}
</script>

<style>
.hm-main{
    height: 400px;
    line-height: 400px;
    text-align: center;
    font-size: 30px;
    background-color: orange;
    color: white;
    margin: 20px,0;

}

底部

<template>
  <div class="hm-footer">
    我是hm-footer
  </div>
</template>

<script>
export default {

}
</script>

<style>
.hm-footer{
    height: 100px;
    line-height: 100px;
    text-align: center;
    font-size: 30px;
    background-color: blue;
    color: white;

}
</style>

联合在一起

<template>
<div class="App">
<HmHeader></HmHeader>
<HmMain></HmMain>
<HmFooter></HmFooter>
</div>
  
</template>

<script>
import HmHeader from './components/HmHeader.vue'
import HmMain from './components/HmMain.vue'
import HmFooter from './components/HmFooter.vue'
export default {
components:{
  HmHeader:HmHeader,
  HmMain:HmMain,
  HmFooter:HmFooter
}
}
</script>

<style>
.App{
  width: 600px;
  height: 700px;
  background-color: aquamarine;
  margin: 0 auto;
  padding: 20px;
}
</style>

全局注册

创建.vue文件（三个组成部分）
main.js中进行全局注册

//导入需要全局注册的组件
import  HmButton from'./components/HmButton'
//调用Vue。component 进行全局注册
//Vue.component('组件名',组件对象）
Vue.component('HmButton',HmButton)

在main.js中添加

import Vue from 'vue'
import App from './App.vue'
//编写导入的代码，往代码的顶部编写（规范）
import HmButton from './components/HmButton'
Vue.config.productionTip = false

//进行全局注册,所有组件范围内都能直接使用
Vue.component('HmButton', HmButton)

new Vue({
  render: h => h(App),
}).$mount('#app')

组件的三大组成部分（结构/样式/逻辑）

组件样式冲突scoped

默认情况：写在组件中的样式会全局生效，因此很容易造成多个组件之间的样式冲突问题 1.全局样式：默认组件中的样式会作用到全局 2.局部样式：可以给组件加上scoped属性，可以让样式只作用于当前组件

scoped原理

当前组件内标签都是被添加data-v-hash值得属性
css选择器都被添加data-v-hash值得属性选择器

<template>
  <div>BaseTwo</div>
</template>

<script>
export default {

}
</script>

<style>
div{
    border: 3px solid red ;
    margin: 30px;
}
</style>

data是一个函数

一个组件的data选项必须是一个函数保证每个组件实例维护独立的一个数据对象

<template>
  <div id="app">
    <BaseCount></BaseCount>
      <BaseCount></BaseCount>
        <BaseCount></BaseCount>
  </div>
</template>

<script>
import BaseOne from './components/BaseOne.vue'
import BaseTwo from './components/BaseTwo.vue'
export default {
  name:'App',
  components:{
  BaseCount:{
    BaseCount
  }
    }
  }


</script>

<style>

</style>

组件通信

组件通信，就是只组件与组件之间的数据传递

组件的数据是独立的，无法直接访问其他组件的数据
想用其他组件的数据，组件通信

**组件关系 **

解决方案父子关系：props和 $emit 非父子关系：provide和$ inject 通用方案：Vuex

父子关系

父组件通过props将数据传递给子组件
子组件利用$emit通知父组件修改更新

父组件

<template>
  <div style="border:3px soild #000; margin:10px;">
  我是App组件
<!--1.给组件标签，添加属性的方式，传值-->
<Son :title="myTitle"></Son>
  </div>
</template>

<script>
import Son from './components/Son.vue'

export default {
  data(){
  return{
  myTitle:'黑马程序员'
  }
}，
components:{
Son
}
}

</script>

<style>

</style>

子组件

<template>
  <div style="border:3px solid #000;margin:10px;">
  <!--3.渲染使用-->
  我是Son组件{{title}}
  </div>
</template>

<script>
export default {
 //2.通过props进行接收
 props:['title']
  }


</script>

<style>

</style>

子传父利用$emit通知父组件，进行修改更新子组件

<template>
  <div style="border:3px solid #000; margin:10px;">
    我是Son组件{{title}}
    <button @click="changeFn">修改<title></title></button>
  </div>
</template>

<script>
export default {
    props:['title'],
    methods:{
        changeFn(){
            //1.通过$emit,向父组件发送消息通知
            this.$emit('changeTitle','传智教育')
        }
    }

}
</script>

<style>

</style>

父组件


<template>
  <div style="border:3px solid #000; margin:10px;">
    我是App组件
    <!-- 2.父组件，对消息进行监听 -->
    <Son :title="myTitle" @changeTitle="handlechange"></Son>
  </div>
</template>

<script>
import Son from './components/Son.vue'
export default {
  data(){
    return{
      myTitle:'学前端，来黑马'
    }
  },
  methods:{
    //3.提供处理函数，提供逻辑
    handleChange(newTitle){
      this.myTitle=newTitle

    }
  }

}
</script>

<style>

</style>

工程化开发和组件介绍