Vue.cli安装,swiper,自定义指令

最新推荐文章于 2024-09-11 14:08:41 发布

小霖子²²²

最新推荐文章于 2024-09-11 14:08:41 发布

阅读量373

点赞数

文章标签： cli安装 swiper 自定义指令

本文链接：https://blog.csdn.net/kuku30/article/details/93888138

版权

vue高级

文章目录

vue高级

掌握要求：

熟练掌握生命周期，会读，会写，会念，并了解每一个生命周期钩子的作用以及项目中的使用
熟练使用swiper并了解在生命周期中如何使用
能够自定义功能性的指令，并熟练掌握自定义指令中的各个钩子函数和参数的意义
能够熟练掌握cli，并了解cli2 和 cli3的区别

一、生命周期

什么是生命周期？
vue中的生命周期指的是组件从创建到销毁一个过程，在这个过程中，我们在每一个特定的阶段会触发一些方法（这些方法具备一些功能），我们给这些方法起了个名字叫做（生命周期钩子函数/ 组件钩子）
为什么要学习生命周期？
因为我们想在生命周期钩子中实现项目功能，那么我们必须知道每一个钩子函数的具体用途
这个生命周期是谁的生命周期？
组件
项目中生命周期如何书写（功能）

因为生命周期比较重要我单独整理了https://blog.csdn.net/kuku30/article/details/93752233

二、swiper

作用：用来实现移动端，pc端滑动操作

swiper是一个第三方的库

学习 swiper 官网文档 https://www.swiper.com.cn/

vue中swiper实现

1. 静态数据的第三方库实例化，我们写在mounted中
2. 动态数据的第三方库实例化，我们写在updated中
3. 优化：
      	1. 做判断条件
      	2. 异步队列
             	1. setTimout
             	2. nextTick

有的开发者，也会使用 vue-swiper 这个第三方的库来实现轮播

三、自定义指令

v-html

v-text

v-for

v-if

v-else-if

v-else

v-show

v-on

v-bind

v-model

以上指令可以不够用户使用，所以vue给开发者提供了自定义指令的方式

举例：比如说我想要有一个指令，来实现一个自动获得input焦点，或是一个轮播。。。

有两种自定义指令的使用形式：

全局定义 ---- vue.directive()
局部定义

directives: {}
指令的钩子函数
- bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
- inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
- update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
- componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
- unbind：只调用一次，指令与元素解绑时调用（指令绑定的元素被删除）。
自定义指令钩子的参数
- el：指令所绑定的元素，可以用来直接操作 DOM 。
- binding
  
  ：一个对象，包含以下属性：
  - name：指令名，不包括 v- 前缀。
  - value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
  - oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
  - expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
  - arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
  - modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
- vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
- oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

作业：结合上午的swiper使用 + 下午的自定义指令，自定义一个叫做 v-banner 的指令来实现轮播

四、cli

什么是cli?

cli是vue提供的一个用来快速构建项目环境的一个工具，底层使用的是webpack
cli目前有哪些版本？

cli2 cli3

cli3对电脑的配置有一定要求
cli如何使用？
1. cli的安装
  npm/cnpm/yarn 都可以使用
  1. $ yarn add @vue/cli global 这个是cli3的版本
    如果我们还想使用cli2的脚手架，那么我们可以在安装一个包
  2. $ yarn add @vue/cli-init global
  如果有的同学安装3失败了，
  那么你可以使用cnpm继续安装 @vue/cli @vue/cli-init
  1. $ cnpm i @vue/cli -g 这个是cli3的版本
  如果我们还想使用cli2的脚手架，那么我们可以在安装一个包
  1. $ cnpm i @vue/cli-init -g
  
  如果还有问题：
  那么你就不要使用cli3了，你可以单独安装cli2
```
 `$ cnpm i vue-cli -g`
```
2. 验证是否安装成功
  命令行输入： $ vue 看是否有东西输出，如果输出命令提示，证明安装成功
3. 创建项目
  
  cli3版本创建
  1. 命令创建【推荐】
    $ vue create project
    - 手动选择配置
    - 如果安装node-sass出问题，如何解决：
      - 先切换成npm源 nrm use npm
      - 使用cnpm 安装 cnpm i node-sass sass-loader -D
  2. 图形界面创建
    $ vue ui
    cli2
  3. 标准版
    $ vue init webpack project
  4. 简易版
    $ vue init webpack-simple project
4. please pick a preset( user arrow keys ) 使用键盘上下键来选择一个配置
  1. default 默认配置
  2. Manually select features 手动选择配置
    
    配置指的是配置webpack
    
    babel 优雅降级 es6 —> es5
    
    eslint js语法检测
    
    CSS Pre-processors css 预处理语言 less sass/scss stylus
    
    Linter / Formatter eslint / jslint
    
    Unit Testing 单元测试
    
    E2E Testing 端到端的测试
    
    In dedicated config files 将所选的每一个选项用一个文件来保存（配置）
  PWA (web app ) 在浏览器中使用的app
Save this as a preset for future projects? 将上面所选的配置保存下来，以备将来的项目使用

我们cli3 使用的包管理器器建议是 yarn 大家一定要记得配置国内镜像源

4.分析几个版本的目录

cli3

node_modules 项目的依赖包
- cli3webpack配置放在node_modules中
public 静态资源目录
- img
- js
- css
- favicon.ico 项目标题的logo
- index.html 根实例组件的模板，也是整个项目的容器
src 源代码开发目录（也是开发者主要开发的目录文件夹）
.gitignore git上传忽略文件配置
babel.config.js 优雅降级配置文件用来将es6 --> es5
package.json 整个项目的依赖配置文件
README.md 整个项目启动的说明性文件
yarn.lock 真个项目的依赖性文件的信息
postcss.config.js 项目css预处理的配置
.browserslistrc 浏览器版本的支持