前端Vue入门-day03-用Vue实现工程化、组件化开发

2023-07-30 127

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 前端Vue入门-day03-用Vue实现工程化、组件化开发

(创作不易，感谢有你，你的支持，就是我前行的最大动力，如果看完对你有帮助，请留下您的足迹）

App.vue 文件（单文件组件）的三个组成部分

普通组件的注册使用

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

① 创建 .vue 文件 (三个组成部分)编辑

② 在使用的组件内导入并注册

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

① 创建 .vue 文件 (三个组成部分)

② main.js 中进行全局注册

生命周期

Vue 生命周期和生命周期的四个阶段

思考：什么时候可以发送初始化渲染请求？（越早越好）什么时候可以开始操作dom ？（至少dom得渲染出来）

Vue生命周期：一个Vue实例从创建到销毁的整个过程。

生命周期四个阶段：① 创建 ② 挂载 ③ 更新 ④ 销毁

Vue 生命周期函数（钩子函数）

Vue生命周期过程中，会自动运行一些函数，被称为【生命周期钩子】→ 让开发者可以在【特定阶段】运行自己的代码。

案例-create的应用

created 数据准备好了，可以开始发送初始化渲染请求。

<!-- 
  需求：进入页面后立即获取相应数据
 -->
<!DOCTYPE html>
<html lang="en">
<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">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .news {
      display: flex;
      height: 120px;
      width: 600px;
      margin: 0 auto;
      padding: 20px 0;
      cursor: pointer;
    }
    .news .left {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding-right: 10px;
    }
    .news .left .title {
      font-size: 20px;
    }
    .news .left .info {
      color: #999999;
    }
    .news .left .info span {
      margin-right: 20px;
    }
    .news .right {
      width: 160px;
      height: 120px;
    }
    .news .right img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  </style>
</head>
<body>
  <div id="app">
    <ul>
      <li v-for="(item,index) in list" :key="item.id" class="news">
        <div class="left">
          <div class="title">{{item.title}}</div>
          <div class="info">
            <span>{{item.source}}</span>
            <span>{{item.time}}</span>
          </div>
        </div>
        <div class="right">
          <img :src="item.img" alt="">
        </div>
      </li>
    </ul>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    // 接口地址：http://hmajax.itheima.net/api/news
    // 请求方式：get
    const app = new Vue({
      el: '#app',
      data: {
        list: []
      },
      async created(){
        const res = await axios.get('http://hmajax.itheima.net/api/news')
        this.list = res.data.data
      }
    })
  </script>
</body>
</html>

案例-mounted的应用

mounted 模板渲染完成，可以开始操作DOM了。

<!-- 
  需求：获取焦点
 -->
<!DOCTYPE html>
<html lang="zh-CN">
<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">
  <title>示例-获取焦点</title>
  <!-- 初始化样式 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset.css@2.0.2/reset.min.css">
  <!-- 核心样式 -->
  <style>
    html,
    body {
      height: 100%;
    }
    .search-container {
      position: absolute;
      top: 30%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
    }
    .search-container .search-box {
      display: flex;
    }
    .search-container img {
      margin-bottom: 30px;
    }
    .search-container .search-box input {
      width: 512px;
      height: 16px;
      padding: 12px 16px;
      font-size: 16px;
      margin: 0;
      vertical-align: top;
      outline: 0;
      box-shadow: none;
      border-radius: 10px 0 0 10px;
      border: 2px solid #c4c7ce;
      background: #fff;
      color: #222;
      overflow: hidden;
      box-sizing: content-box;
      -webkit-tap-highlight-color: transparent;
    }
    .search-container .search-box button {
      cursor: pointer;
      width: 112px;
      height: 44px;
      line-height: 41px;
      line-height: 42px;
      background-color: #ad2a27;
      border-radius: 0 10px 10px 0;
      font-size: 17px;
      box-shadow: none;
      font-weight: 400;
      border: 0;
      outline: 0;
      letter-spacing: normal;
      color: white;
    }
    body {
      background: no-repeat center /cover;
      background-color: #edf0f5;
    }
  </style>
</head>
<body>
<div class="container" id="app">
  <div class="search-container">
    <div class="search-box">
      <input type="text" v-model="words" id="inp">
      <button>搜索一下</button>
    </div>
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      words: ''
    },
    //核心思路：
    //1.等输入框渲染出来
    //2.让输入框获取焦点
    mounted(){
      document.querySelector('#inp').focus()
    }
  })
</script>
</body>
</html>

工程化开发 & 脚手架 Vue CLI

开发 Vue 的两种方式

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

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

问题：

① webpack 配置不简单

② 雷同的基础配置

③ 缺乏统一标准

需要一个工具，生成标准化的配置！

基本介绍

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

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

好处：

1. 开箱即用，零配置

2. 内置 babel 等工具

3. 标准化

使用步骤：

1. 全局安装 (一次) ： yarn global add @vue/cli 或 npm i @vue/cli -g

2. 查看 Vue 版本： vue --version

3. 创建项目架子： vue create project-name （项目名-不能用中文）

4. 启动项目： yarn serve 或 npm run serve （找package.json）

错误解析

这里可能会出现几个错误提示：

无法将“yarn”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确，然后再试一次。

解决方法：

使用管理员身份打开cmd

npm install -g yarn

解决方法：

1、win+x 打开PowerShell（管理员）

2、set-ExecutionPolicy RemoteSigned //设置为打开

3、键入Y或者A,同意

4、执行get-executionpolicy查看是否更改成功，为RemoteSigned表示成功

执行完上边这些基本就可以解决了，如若没执行命令还没解决；

可能是原来目录下和当前设置的并没有同步，还是保持原来的设置。

那么可以在powershell中找到相应命令行，进行运行脚本，即可执行。

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

组件化开发 & 根组件

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

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

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

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

App.vue 文件（单文件组件）的三个组成部分

1. 语法高亮插件：

2. 三部分组成：

◆ template：结构（有且只能一个根元素）

◆ script: js逻辑

◆ style：样式 (可支持less，需要装包)

3. 让组件支持 less

（1） style标签，lang="less" 开启less功能

（2）装包: yarn add less less-loader

普通组件的注册使用

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

① 创建 .vue 文件 (三个组成部分)

② 在使用的组件内导入并注册

使用：

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

注意:

组件名规范 → 大驼峰命名法，如：HmHeader

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

① 创建 .vue 文件 (三个组成部分)

② main.js 中进行全局注册

使用：

◆ 当成 html 标签使用 `<组件名></组件名>`

注意:◆ 组件名规范 → 大驼峰命名法，如：HmHeader

技巧：

◆ 一般都用局部注册，如果发现确实是通用组件，再定义到全局。

前端Vue入门-day03-用Vue实现工程化、组件化开发

生命周期

Vue 生命周期和生命周期的四个阶段