cli3

最新推荐文章于 2022-03-31 17:19:36 发布

苏废物~~

最新推荐文章于 2022-03-31 17:19:36 发布

阅读量228

点赞数

分类专栏： vue.js 文章标签： cli3

本文链接：https://blog.csdn.net/weixin_42307490/article/details/94413714

版权

vue.js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、生命周期（王者）

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

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 钩子中可用。

四、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 静态资源目录（生产环境）【这个目录下的静态资源不会被webpack 编译】
- img
- js
- css
- favicon.ico 项目标题的logo
- index.html 根实例组件的模板，也是整个项目的容器
src 源代码开发目录（也是开发者主要开发的目录文件夹）
- assets 开发环境的静态资源目录（这个目录中的资源会被webpack编译）
- assets中如果图片的大小 > 4k 我们就原样拷贝到dist目录
- assets中如果图片的小小 < 4K 我们就将这个图片转化成 base64
- base64它是我们前端处理图片的一种形式，将图片路径进行编码，它可以减少一次ajax请求，达到前端性能优化的一个方案，但是base64有一个弊端，这个弊端就是会污染html结构
- components 组件存储目录
- xxx.vue文件单文件组件一个vue文件就是一个组件
- 组成部分
- template模板（必须写的）
- script脚本（可写可不写）
- style样式（可写可不写）
- scoped 作用是可以减少命名冲突，规定一个样式的作用域
.gitignore git上传忽略文件配置
babel.config.js 优雅降级配置文件用来将es6 --> es5
package.json 整个项目的依赖配置文件
README.md 整个项目启动的说明性文件
yarn.lock 真个项目的依赖性文件的信息
postcss.config.js 项目css预处理的配置
.browserslistrc 浏览器版本的支持

cli2 标准版

build webpack配置

config webpack配置

node_modules

src

static 静态资源配置

css

img

.babelrc 优雅降级配置文件

.postcssrc css预处理配置文件

.editorconfig 编辑器配置文件

cli2 简易版

src 源代码开发目录

webpack.config.js webpack配置文件

6.cli 它是 webpack + es6模块化来集中实现的

es6模块化

模块的定义
```
const obj = {}
const fn = function(){}
```

模块的导出

// 模块的导出有两种形式
export default //默认导出一个

//export // 批量导出，导出多个

模块的引入

// 如果是export  default 导出
import xxx from '../xxx.xx'

// 如果是export 导出

improt  { xx } from '../xx.xx'  || import * as xx from '../xx.xx'

在cli3中创建组件，然后导出组件，然后使用组件

在 vs code编辑器中安装一个插件（ Vetur ）,可以使用vue文件代码高亮还可以有代码提示

【HMR】热重载自动刷新 webpack配置

cli3 将webpack配置放在 node_modules,所以Vue并不希望大家去修改这部分webpack配置

如果我们将来需要更改webpack配置，那么我们需要在项目根目录下创建一个 vue.config.js文件

苏废物~~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
cli3

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

扫一扫