Vue2向Vue3过度核心技术工程化开发和脚手架

灰太狼 2024-03-24 21:36 52阅读 0赞

#### 目录 ####

*   *  1 工程化开发和脚手架
     *   *  1.1 开发Vue的两种方式
         *  1.2.脚手架Vue CLI
     *  2 项目目录介绍和运行流程
     *   *  2.1 项目目录介绍
         *  2.2 运行流程
     *  3 组件化开发
     *  4 根组件 App.vue
     *   *  4.1 根组件介绍
         *  4.2 组件是由三部分构成
         *  4.3 总结
     *  5 普通组件的注册使用-局部注册
     *   *  5.1 特点：
         *  5.2 步骤：
         *  5.3 使用方式：
         *  5.4 注意：
         *  5.5 语法：
         *  5.6 练习
         *  5.7 总结
     *  6 普通组件的注册使用-全局注册
     *   *  6.1 特点：
         *  6.2 步骤
         *  6.3 使用方式
         *  6.4 注意
         *  6.5 语法
         *  6.6 练习
         *  6.7 总结

--------------------

### 1 工程化开发和脚手架 ###

![在这里插入图片描述][4e7b7387c89642718443ffc31c989dde.png]

#### 1.1 开发Vue的两种方式 ####

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

![在这里插入图片描述][077b2df7a424466188006595f7f04654.png]

工程化开发模式优点：

提高编码效率，比如使用JS新语法、Less/Sass、Typescript等通过webpack都可以编译成浏览器识别的ES3/ES5/CSS等

工程化开发模式问题：

*  webpack配置**不简单**
 *  **雷同**的基础配置
 *  缺乏**统一的标准**

为了解决以上问题，所以我们需要一个工具，生成标准化的配置

#### 1.2.脚手架Vue CLI ####

基本介绍：

Vue CLI 是Vue官方提供的一个**全局命令工具**

可以帮助我们**快速创建**一个开发Vue项目的**标准化基础架子**。【集成了webpack配置】

好处：

1.  开箱即用，零配置
2.  内置babel等工具
3.  标准化的webpack配置

使用步骤：

1.  全局安装（只需安装一次即可） yarn global add @vue/cli 或者 npm i @vue/cli -g
2.  查看vue/cli版本： vue --version
3.  创建项目架子：**vue create project-name**(项目名不能使用中文)
4.  启动项目：**yarn serve** 或者 **npm run serve**(命令不固定，找package.json)

### 2 项目目录介绍和运行流程 ###

#### 2.1 项目目录介绍 ####

![在这里插入图片描述][afe61d22101c44b49052bdff9985ab60.png]

虽然脚手架中的文件有很多，目前咱们只需人事三个文件即可

1.  main.js 入口文件
2.  App.vue App根组件
3.  index.html 模板文件

#### 2.2 运行流程 ####

![在这里插入图片描述][ffe86d8e0bef4cd591133f3738702068.png]

### 3 组件化开发 ###

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

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

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

比如：下面这个页面，可以把所有的代码都写在一个页面中，但是这样显得代码比较混乱，难易维护。咱们可以按模块进行组件划分

![在这里插入图片描述][989c6a46815743a1bf3a2cfaa87f7fe8.png]

总结：

组件化的好处是什么？

组件的分类？

### 4 根组件 App.vue ###

#### 4.1 根组件介绍 ####

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

![在这里插入图片描述][5afda2f8072242bebf7a794f7b7bbbda.png]

#### 4.2 组件是由三部分构成 ####

*  语法高亮插件

![在这里插入图片描述][6cf388921a584a65997315ca72215de3.png]

*  三部分构成
    
     *  template：结构 （有且只能一个根元素）
     *  script: js逻辑
     *  style： 样式 (可支持less，需要装包)
 *  让组件支持less
    
    （1） style标签，lang=“less” 开启less功能
    
    （2） 装包: yarn add less less-loader -D 或者npm i less less-loader -D

#### 4.3 总结 ####

App组件包含哪三部分？

### 5 普通组件的注册使用-局部注册 ###

#### 5.1 特点： ####

只能在注册的组件内使用

#### 5.2 步骤： ####

1.  创建.vue文件（三个组成部分）
2.  在使用的组件内先导入再注册，最后使用

#### 5.3 使用方式： ####

当成html标签使用即可 <组件名></组件名>

#### 5.4 注意： ####

组件名规范 —> 大驼峰命名法， 如 HmHeader

#### 5.5 语法： ####

![在这里插入图片描述][6a8f4eafee53401ca98d6b539ee164cf.png]

// 导入需要注册的组件
    import 组件对象 from '.vue文件路径'
    import HmHeader from './components/HmHeader'
    
    export default {
          // 局部注册
      components: {
        
       '组件名': 组件对象,
        HmHeader:HmHeaer,
        HmHeader
      }
    }

#### 5.6 练习 ####

在App组件中，完成以下练习。在App.vue中使用组件的方式完成下面布局

![在这里插入图片描述][5f60650c8ae14000bfbe4d1d085a4900.png]

<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: #8064a2;
      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: #f79646;
      color: white;
      margin: 20px 0;
    }
    </style>

<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: #4f81bd;
      color: white;
    }
    </style>

#### 5.7 总结 ####

*  A组件内部注册的局部组件能在B组件使用吗
 *  局部注册组件的步骤是什么
 *  使用组件时 应该按照什么命名法

### 6 普通组件的注册使用-全局注册 ###

#### 6.1 特点： ####

全局注册的组件，在项目的**任何组件**中都能使用

#### 6.2 步骤 ####

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

#### 6.3 使用方式 ####

当成HTML标签直接使用

> <组件名></组件名>

#### 6.4 注意 ####

组件名规范 —> 大驼峰命名法， 如 HmHeader

#### 6.5 语法 ####

Vue.component(‘组件名’, 组件对象)

例：

// 导入需要全局注册的组件
    import HmButton from './components/HmButton'
    Vue.component('HmButton', HmButton)

#### 6.6 练习 ####

在以下3个局部组件中是展示一个通用按钮

![在这里插入图片描述][540bc8d0603d4b388b1554a2bc7a771d.png]

<template>
      <button class="hm-button">通用按钮</button>
    </template>
    
    <script>
    export default {
    
    }
    </script>
    
    <style>
    .hm-button {
      height: 50px;
      line-height: 50px;
      padding: 0 20px;
      background-color: #3bae56;
      border-radius: 5px;
      color: white;
      border: none;
      vertical-align: middle;
      cursor: pointer;
    }
    </style>

#### 6.7 总结 ####

1.全局注册组件应该在哪个文件中注册以及语法是什么？

2.全局组件在项目中的任何一个组件中可不可以使用？

[4e7b7387c89642718443ffc31c989dde.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/94ad6721418f4e15af497c9e1c70e38f.png
[077b2df7a424466188006595f7f04654.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/24988a1a16b849a78aeb7cbedbc7135d.png
[afe61d22101c44b49052bdff9985ab60.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/2f0aa0b17934426686a457d5551c43ab.png
[ffe86d8e0bef4cd591133f3738702068.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/a5438a901cff4be7ba8f8de9a13f2ee2.png
[989c6a46815743a1bf3a2cfaa87f7fe8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/f4045964d08b460a8c64a0ab44b012e5.png
[5afda2f8072242bebf7a794f7b7bbbda.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/1656764f04bb49838c2275035e81fc09.png
[6cf388921a584a65997315ca72215de3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/953f9ac72914439082954fd9f8e0a8b8.png
[6a8f4eafee53401ca98d6b539ee164cf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/68728c61f9b64e3b85f2f241c6c8051a.png
[5f60650c8ae14000bfbe4d1d085a4900.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/619dcf93aef145c281f38c26cd6b4c3c.png
[540bc8d0603d4b388b1554a2bc7a771d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/90da330c36b04979a364bc8302c42252.png