day03

day03

目录

• day03
  • Vue 生命周期
  • Vue 生命周期钩子
  • 工程化开发和脚手架
    • 开发 Vue 的两种方式
    • 脚手架 Vue CLI
      • 基本介绍
      • 好处
      • 使用步骤
  • 项目目录介绍和运行流程
    • 项目目录介绍
    • 运行流程
  • 组件化开发
  • 根组件 App.vue
    • 组件是由三部分构成
  • 普通组件的注册使用 — 局部注册
    • 特点
    • 步骤
    • 使用方式
    • 注意
    • 语法
  • 普通组件的注册使用 — 全局注册
    • 特点
    • 步骤
    • 使用方式
    • 注意
    • 语法

Vue 生命周期

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

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

• 生命周期四个阶段：

  1. 创建阶段：创建响应式数据
  2. 挂载阶段：渲染模板
  3. 更新阶段：修改数据，更新视图
  4. 销毁阶段：销毁Vue实例

Vue 生命周期钩子

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

• 主要的就是

  • 响应式数据准备好之后：created()

    • 获取初始化数据

  • 模板渲染之后：mounted()

    • 在一进入页面就获取焦点

    • 获取初始化饼图（[官方请查看](Apache ECharts) 点击快速入门）

      // <div id="main"></div> 放图的盒子
      
      // let myChart = echarts.init(document.getElementById('main'));
      // myChart.setOption({初始化的数据option})
      // 这样let的话除了这个方法内，外面都无法使用myChart，所以可以先挂载到实例上，直接用this:
      
      this.myChart = echarts.init(document.getElementById('main'));
      this.myChart.setOption({初始化的数据option})
      
      // 在需要更新图标的地方
      this.myChart.setOption({
      	// 只留下更新的部分即可，原有的保留的可以不写不操作，如:
      	series: [
          {
      			data: this.list.map(item => ({value: item.price, name: item.name}))
          }
      	]
      })
      

  • 也就组件时可能会用到卸载前：beforeDestory() 来清除掉一些 vue 以外的资源占用（定时器。延时器等）

工程化开发和脚手架

开发 Vue 的两种方式

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

• 工程化开发模式：基于构建工具（例如：webpack）的环境中开发 Vue

  

  • 自己编写的代码要经过 webpack 配置（自动化编译压缩组合）才能变成浏览器可识别的代码
  • 配置不简单而且公司一般都不一样

• 工程化开发模式优点：

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

• 工程化开发模式问题：

  • webpack 配置不简单

  • 雷同的基础配置

  • 缺乏统一的标准

• 为了解决以上问题，所以需要一个工具，生成标准化的配置，也就是 Vue CLI 脚手架

脚手架 Vue CLI

基本介绍

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

• 可以帮助我们快速创建一个开发 Vue 项目的标准化基础架子

  • 集成了 webpack 配置

• vue2 用到 vue cli 较多，vue3 又出了 vite 代替 cli

好处

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. 启动项目：cd 进入项目目录里 yarn serve 或者 npm run serve（命令不固定，找 package.json）
   • 这里的 serve 是因为在项目中的 package.json 里 "scripts":{ "serve": "......" } 是写的 serve，所以命令不固定，要找 package.json 看

项目目录介绍和运行流程

项目目录介绍

• 下述图片是用 yarn 创建的项目的脚手架的目录

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

  • main.js：入口文件
  • App.vue：App 根组件
  • index.html：模板文件

• 运行需要 Ctrl + `

  • 打开终端，yarn serve 或者 npm run serve 运行

• 核心入口文件是 main.js，核心作用：导入 App.vue，基于 App.vue 创建结构渲染页面

  • 内容有：

    • import xxx from 'yyy' 导入

    • Vue.config.productionTip = false 提示当前处于什么环境（生产 / 开发），true 的时候才会在页面控制层看到 You are running Vue in development mode 就是开发环境的意思

    • new Vue({ ...... }) vue 实例化，提供 render 方法，基于 App.vue 创建结构渲染页面

      new Vue({
        el:'#app', 
        render: h => h(App), 
      })
      
      // 两种写法一个作用，el和$mount都是用于指定Vue所管理的容器
      
      new Vue({
        render: h => h(App), 
      }).$mount('#app')
      
      // 下述是完整写法(上面的是简写，h是形参)
      
      new Vue({
        render: (createElement) => {
          // 基于App创建元素结构
          return createElement(App)
        } 
      }).$mount('#app')
      

运行流程

• 下图是以 yarn 为例

组件化开发

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

• 好处：便于维护，利于复用

  • 提升开发效率

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

根组件 App.vue

• 整个应用最上层的组件，包裹所有普通小组件
• 例：
  • App 根组件
    • 头部组件
    • 主体组件
    • 底部组件

组件是由三部分构成

• 语法高亮插件：Vetur

• 三部分构成（在 vue 文件中可以输入 <vue> 找到 <vue> with default.vue 回车即可生成）

  • template：结构（有且只能一个根元素）
  • script: 行为（js 逻辑）
  • style： 样式（可支持 less，需要装包）

• 让组件支持 less

  • style 标签里加上：lang="less" （开启 less 功能）
  • 安装依赖包：yarn add less less-loader -D 或者 npm i less less-loader -D（less 和 less-loader 两个都要装）

• 注意：.vue 的 <template> 标签内部只能有一个根标签

  • vue3 不再限制一个根标签了

  <!--  以下结构就会报错  --> 
  <template>
  	<div>
      xxxx
    </div>
  	<div>
      yyy
    </div>	
  </template>
  
  <!--  下述结构就没有问题了  --> 
  <template>
  	<div>
      <div>
        xxxx
      </div>
      <div>
        yyy
      </div>	
    </div>
  </template>
  

• vue 三大基础结构

普通组件的注册使用 — 局部注册

特点

• 只能在注册的组件内使用

步骤

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

使用方式

• 当成 html 标签使用即可 <组件名></组件名>
• 可以直接输入 组件名 然后按 tab 键就可以补全尖括号了
  • 没有的就点击 VS 左下角的设置图标，选择设置，搜索 trigger on tab，第一个就会显示复选框：启用后，按下 TAB 键，将展开 Emmet 缩写
  • 选中后别忘了重启生效

注意

• 组件名规范：大驼峰命名法

语法

• 例：

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

普通组件的注册使用 — 全局注册

特点

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

步骤

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

使用方式

• 当成 html 标签直接使用 <组件名></组件名>

注意

• 组件名规范 —> 大驼峰命名法

语法

• Vue.component('组件名', 组件对象)

• 例（main.js 中跟着已有的 import 后面继续写）：

  // 导入(这里以HmButton为例)
  import HmButton from './components/HmButton'
  
  // 全局注册
  Vue.component('HmButton', HmButton)
  

  • 注意，在 import 时，最后不管加不加 .vue 都可以成功导入