曼诺尔雷迪亚兹
曼诺尔雷迪亚兹

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的两种方式:

  1. 核心包传统开发模式:基于html / css / js 文件，直接引入核心包，开发Vue。

  2. 工程化开发模式:基于构建工具（例如: webpack )的环境中开发Vue。

vue的工程化开发全流程，以及开发中的细节语法和用法_第1张图片

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、脚手架目录文件介绍&项目运行流程

项目的目录：

vue的工程化开发全流程，以及开发中的细节语法和用法_第2张图片

项目的运行流程：

vue的工程化开发全流程，以及开发中的细节语法和用法_第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>
    
  
  <noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
        Please enable it to continue.strong>
  noscript>

  
  <div id="app">
    
  div>
      
  
body>

html>

1.4、组件化开发&根组件

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

    好处：便于维护，利于复用→提升开发效率。

  • 根组件：整个应用最上层的组件，包裹所有普通小组件。

组件化开发图示：

vue的工程化开发全流程，以及开发中的细节语法和用法_第4张图片
  • 一个根组件App.vue，包含的三个部分:
    1. template结构(只能有一个根节点)
    2. style 样式(可以支持less，需要装包 less和less-loader )
    3. script行为

1.5、普通组件的注册使用

组件注册的两种方式:

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

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

2、工程化开发细则

2.1、组件的三大组成部分

  1. 结构