vue的工程化开发全流程，以及开发中的细节语法和用法

vue的工程化开发全流程

文章目录

vue的工程化开发全流程
- 1、工程化开发&脚手架Vue CLI
- - 1.1、前言
  - 1.2、脚手架Vue CLI
  - 1.3、脚手架目录文件介绍&项目运行流程
  - 1.4、组件化开发&根组件
  - 1.5、普通组件的注册使用
- 2、工程化开发细则
- - 2.1、组件的三大组成部分
  - 2.2、组件的样式冲突scoped
  - 2.3、data是一个函数
  - 2.4、组件通信
  - - 2.4.1、不同的组件关系和组件通信方案分类
    - 2.4.2、组件通信的解决方案
    - 2.4.3、非父子通信- event bus事件总线
  - 2.5、prop
  - - 2.5.1、prop详解
    - 2.5.2、prop校验
    - 2.5.3、prop & data、单向数据流
  - 2.6、v-mdoel原理
  - 2.7、表单类组件封装&v-model简化代码

1、工程化开发&脚手架Vue CLI

1.1、前言

开发Vue的两种方式:

核心包传统开发模式:基于html / css / js 文件，直接引入核心包，开发Vue。
工程化开发模式:基于构建工具（例如: webpack )的环境中开发Vue。

1.2、脚手架Vue CLI

基本介绍:

Vue CLl是 Vue官方提供的一个全局命令工具。
可以帮助我们快速创建一个开发Vue 项目的标准化基础架子。【集成了webpack配置】

使用步骤:

1. 全局安装(一次): yarn global add @vue/cli或npm i @vue/cli -g
1. 查看Vue版本: vue --version
1. 创建项目架子: vue create project-name(项目名-不能用中文)
1. 启动项目: yarn serve 或 npm run serve(找package.json)

1.3、脚手架目录文件介绍&项目运行流程

项目的目录：

项目的运行流程：

main.js的核心代码：

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

//2、导入App根组件 
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),//简写模式，下面为全写，createElement为形参
  render: (createElement) => {
    //  基于App创建元素结构
    return createElement(App)
  }

}).$mount('#app')

index.html的核心代码：

<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title>
    <%= htmlWebpackPlugin.options.title %>
  </title>
</head>

<body>
    
  <!-- 兼容：给不支持js的浏览器一个提示-->
  <noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
        Please enable it to continue.</strong>
  </noscript>

  <!-- vue所管理容器的区域 -->
  <div id="app">
    <!-- 在工程化开发中，这里不再编写模版语法，而是通过app.vue提供结构语法 -->
  </div>
      
  <!-- built files will be auto injected -->
</body>

</html>

1.4、组件化开发&根组件

组件化：一个页面可以拆分成一个个组件，每个组件有着自己独立的结构、样式、行为。

好处：便于维护，利于复用→提升开发效率。
根组件：整个应用最上层的组件，包裹所有普通小组件。

组件化开发图示：

一个根组件App.vue，包含的三个部分:
1. template结构(只能有一个根节点)
2. style 样式(可以支持less，需要装包 less和less-loader )
3. script行为

1.5、普通组件的注册使用

组件注册的两种方式:

局部注册：只能在注册的组件内使用
1. 创建.vue文件(三个组成部分)
2. 在使用的组件内导入并注册
全局注册：所有组件内都能使用
1. 创建.vue文件(三个组成部分)
2. main.js 中进行全局注册

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

2、工程化开发细则

2.1、组件的三大组成部分

结构<template>：
- 只能有一个根元素
样式<style>
- 全局样式(默认)：影响所有组件
- 局部样式： scoped下样式，只作用于当前组件
逻辑<script>
- el根实例独有，data是一个函数，其他配置项一致

2.2、组件的样式冲突scoped

默认情况：写在组件中的样式会全局生效→因此很容易造成多个组件之间的样式冲突问题。

1．全局样式：默认组件中的样式会作用到全局

2．局部样式：可以给组件加上scoped 属性，可以让样式只作用于当前组件

scoped原理:
	1．给当前组件模板的所有元素,都会被添加上一个自定义属性data-v-5f6a9d56(data-v-hash值)区分开不同的组件
	2. css选择器后面，被自动处理，添加上了属性选择器div[data-v-5f6a9d56]

2.3、data是一个函数

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

<template>
  <div class="base-count">
    <button @click="count--">-</button>
    <span>{{ count }}</span>
    <button @click="count++">+</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      count: 100,
    };
  }
};
</script>

每次创建新的组件实例，都会新执行一次data函数，得到一个新对象。保证每个实例都独立的维护一个数据对象。

2.4、组件通信

概念：组件通信，就是指组件与组件之间的数据传递。

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

2.4.1、不同的组件关系和组件通信方案分类

组件关系分类（如图）：

父子关系：
1. 父组件通过props将数据传递给子组件
2. 子组件利用$emit通知父组件修改更新
非父子关系：
- provide & inject或eventbus
通用方案：vuex

2.4.2、组件通信的解决方案

父传子props属性：

子传父$emit属性:

2.4.3、非父子通信- event bus事件总线

作用：非父子组件之间，进行简易消息传递。(复杂场景→Vuex)

创建一个都能访问到的事件总线(空Vue 实例)→utils/EventBus.js

A组件(接收方)，监听Bus实例的事件

B组件(发送方)，触发Bus 实例的事件

2.5、prop

2.5.1、prop详解

Prop定义：组件上注册的一些自定义属性Prop
作用：向子组件传递数据
特点:
- 可以传递任意数量的prop
- 可以传递任意类型的prop

代码演示：

2.5.2、prop校验

作用：为组件的prop指定验证要求，不符合要求，控制台就会有错误提示–>帮助开发者，快速发现错误

语法：①类型校验②非空校验③默认值④自定义校验

基础写法（类型校验）

export default {
    //此种方式就没对值进行校验，假如传入其他非数字类型也会传参
    // props: ["precent"],

    //将props写成对象的形式来约束参数类型(基础写法，类型校验)
    props: {
        precent: Number //String Boolean Array Object Function
    }
};

完整写法（类型，非空，默认，自定义）

     props: {
        precent: {
            type: Number, //类型校验 Number String Boolean Array Object Function
            required: true, //是否可以空，true：表示开启非空验证
            default: 0, //默认的参数，没有值的时候使用该值
            validator(value) { //value是传过来的值
                // 在此进行自定义的代码校验逻辑
                
                return true;//返回true：即通过了代码逻辑，false：没有通过代码逻辑
            }
        }
    }