当前位置: 首页 > news >正文

Vue CLI: 安装、项目创建及基本概念指南,vue生命周期

只有经历地狱般的磨砺,才能练就创造出天堂的力量;只有流过血的手指,才能弹奏出世间绝唱

文章目录

        • vue-cli
          • 介绍
          • 安装
          • 创建项目
          • 入口文件
          • 修改文件夹名称的步骤
          • ES6模块化
          • 单文件组件
        • vue生命周期
        • vue动画

vue-cli
介绍
  • vue-lic是一个开发vue项目的脚手架工具,可以提供基于vue项目架子的快速创建,称为一套标准。
    • 统一的项目结构
    • 提供了开发过程中的系列工具
      • babel:语法降级
      • eslint:约束语法风格
      • less:预处理器
    • 提供了一个开发服务器,方便预览
      • 自动刷新浏览器,方便预览
      • 热更新功能,有些资源的更改,不需要刷新浏览器,立即更新,进行预览
安装
  • npm安装:npm i @vue/cli -g; yarn安装:yarn add @vue/cli global
    • 成功:安装日志中没有任何关于error、err相关的日志,代表成功
    • 关于安装报错的问题
      • 90%是网络问题,需要多试试
      • 如果安装慢,使用淘宝镜像
        • windows:npm i @vue/cli -g --registry=https://registry.npm.taobao.org
        • mac:![请添加图片描述](https://i-blog.csdnimg.cn/direct/f86b41ec032348de847c7776c25b1483.png) sudo npm i @vue/cli -g
  • 测试:vue --version
创建项目
  1. 打开命令行窗口,执行命令 vue create 项目名称
    1. 项目名称必须英文
    2. 项目名称不能和包名重名

  2. 选择创建方式,默认创建,自定义创建
    在这里插入图片描述

  3. 等待安装项目依赖的包
    在这里插入图片描述

  4. 创建成功
    在这里插入图片描述

  5. 启动项目 (在项目根目录下执行 npm run serve)

  6. 启动成功
    在这里插入图片描述

  7. 去浏览器访问 http://localhost:8080
    在这里插入图片描述

入口文件

请添加图片描述

  • 作用
    • 在vue-cli的项目中,是以单个文件作为组件进行开发,也是以模块的方式进行开发
    • 项目中拥有很多文件,像是css、js组件
    • 通过main.js去整合所有的拆分的文件,导入到main.js里面来,通过vue-cli合并所有的文件在一个页面中进行预览
修改文件夹名称的步骤
  1. 退出vue运行,修改创建的demo1文件夹的名称为实际项目名称,例如 改成demo2
  2. 删除node_modules文件夹
  3. 修改package.json中的项目名称为项目实际名称demo2
  4. 修改public文件夹里面的index.html的title为项目实际名称demo2
  5. 修改完成,执行 npm i ,创建node_modules文件夹,然后 npm run serve 运行项目,并使用浏览器访问
ES6模块化
  • 作用:用来约定模块(一个js文件就会少一个模块,模块拥有自己的作用域)的导入和导出
  • 默认导入与导出
    • 导入:import 变量名 from '包名|js模块路径'
    • 导出:export default 导出内容
  • 按需导入与导出
    • 导入:import {成员变量名1,成员变量名2} from '包名|js模块路径'
    • 导出:export const 成员变量名= '导出内容'
单文件组件
  • 不管是何种注册方式,每个组件必须有一个组件配置化对象
    请添加图片描述
    现在定义组件
  • .vue文件的方式来定义组件,文件的内容代表的是:组件配置对象
  • 需要渲染这个组件
    • 使用这个配置对象进行全局注册或者局部注册,再来使用
    • 使用路由规则中的component选项指定路由配置对象
  • 称为:单文件组件
    请添加图片描述
vue生命周期

生命周期指的是一个vue实例,从创建到销毁的过程。在生命过程中,每到一个时间点,vue会触发某个函数,回调函数,生命周期钩子函数
请添加图片描述

  • 创建阶段
    • beforeCreate():在实例初始化之后,数据观测 (data observer) 和事件配置之前被调用。此时,实例还未开始初始化 $data 对象
    • created():在实例创建完成后立即调用。此时,实例已完成以下配置:数据观测、属性和方法的运算、watch/event 事件回调。然而,挂载阶段还未开始,$el 属性目前不可见
  • 挂载阶段
    • beforeMount():在挂载开始之前被调用,相关的 render 函数首次被调用。此时,模板编译已经完成,但尚未渲染到页面上
    • mounted():实例被挂载后调用,此时,el 被新创建的 vm.$el 替换,并插入到 DOM 中。在这个阶段,可以直接访问 DOM 元素
  • 更新阶段
    • beforeUpdate():数据更新时调用,发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM,例如手动移除已添加的事件监听器
    • updated():由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。当这个钩子被调用时,组件 DOM 已经更新,可以执行依赖于 DOM 的操作
  • 销毁阶段
    • beforeDestory():实例销毁之前调用。在这一步,实例仍然完全可用
    • destoryed():实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁
vue动画
  • 提供了进入和离开时候的动画实现,也就是一个进场动画和离场动画的实现
  • 提供了创建显示元素或组件,移除隐藏元素或组件,过程中的动画
    请添加图片描述
  • 显示/创建 (元素|组件)
    • v-enter:进入前
    • v-enter-active:进入中
    • v-enter-to:进入后
  • 隐藏/移除 (元素|组件)
    • v-leave:离开前
    • v-leave-active:离开中
    • v-leave-to:离开后
  • 在不同阶段,改变元素或组件的样式属性,然后添加过滤效果,即可实现动画

http://www.mrgr.cn/news/61996.html

相关文章:

  • 需要知道的关键字
  • linux 高级 I/O
  • PXC集群(Percona XtraDB Cluster )
  • 【Golang】Golang的数组和slice切片的区别
  • VLAN虚拟局域网,eNSP实验讲解
  • 数据结构——(第七章:查找)
  • C++:输入和输出
  • 《Linux系统编程篇》exec族函数——基础篇
  • MATLAB——入门知识
  • Vue3 学习笔记(十三)Vue组件详解
  • Windows高级技巧:轻松实现多进程窗口的连接与管理
  • 轻松实现金蝶与旺店通数据无缝对接的完整解决方案
  • Linux文件系统_inode
  • 兽音译器的编码原理
  • 真香!Python十大文件操作整理,收藏起来以后有用!!
  • 为什么不建议使用黑帽SEO手法?
  • 阿里云VPC机器如何访问公网
  • 【总目录】
  • 浏览器指纹:了解这个神秘的技术
  • node学习记录-process
  • 【flink】之kafka到kafka
  • Flask
  • Python 中 jieba 模块详解
  • Frida使用
  • ✨云桥计划✨
  • 最小均方估计贝叶斯估计