Shinkai005

V1

2022/04/28阅读:42主题:红绯

从零一起看vue文档第一天

代办

  • [ ] 用Xmind理一下文档结构
  • [ ] vue介绍的视频 精听
  • [ ] vue和其他框架的比较
  • [ ] vue cli

从零一起看vue文档第一天

vuejs介绍

什么是vue

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。

这句话有两个点

  1. 用户界面
  2. 渐进式框架

用户界面: 简单来说就是告诉浏览器数据如何呈现. image-20220427110503075

渐进式: 就是可以拆卸装备的框架. 不需要一次引入所有内容.只需要引入所需的.随着时间增长业务加重,再继续引入即可.

vue特点

Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。

另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

vue比较轻便,还是需要与各种其他的类库,工具链来使用的.

但是! 因为尤大的推荐, 使用过程中会发现大家用的都是那些常见的.(特殊需求会用一些不常见的...常见的够用了).

下面介绍一下2022年的一些工具链,类库

「编译器」、「打包器」、「包管理器」、「第三方库开发」、「Web 应用开发」

编译器

编译器负责将输入的代码,转换为某种目标的输出格式。

本文只关注 JS 和 TS 的编译器,它可以将现代的 JS 和 TS 转换成特定版本的 ECMAscript,并兼容浏览器和最新版本的 Node.js。

image-20220427104923417
image-20220427104923417
image-20220427105012252
image-20220427105012252

打包器

打包器负责将所有的源文件打包到一起,通常用于打包第三方库和 web 应用。

image-20220427105041743
image-20220427105041743

包管理

image-20220427105151404
image-20220427105151404

Web 应用开发

这些高级工具和框架会帮助开发者屏蔽掉所有细节,来更好地构建现代 web 应用。

image-20220427105602910
image-20220427105602910
image-20220427220918816
image-20220427220918816

这里有一个视频,我明天会把这个视频精听了~ 把英文字幕写出来~

对比其他框架留坑

起步

开始创建vue项目.开始之前小tip了一下不建议直接以vue框架入门前端

需要有一些基础知识,最起码有如下:js基础知识

  • es6语法规范
  • es6模块化
  • 包管理
  • 原型链,原型
  • 数组常用方法
  • axios
  • promise
  • ...

安装(可以跳过不看,偏向于工程化)

兼容性

Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。

如下图片红色是完全不支持,浅绿色是部分支持,绿色是完全支持.

image-20220427232755425
image-20220427232755425

语义化版本控制

Vue 在其所有项目中公布的功能和行为都遵循语义化版本控制。对于未公布的或内部暴露的行为,其变更会描述在发布说明中。

什么是语义化?简单的了解下 看下图

image-20220427232923701
image-20220427232923701

其实都是这么说的......

Vue Devtools

在使用 Vue 时,我们推荐在你的浏览器上安装 Vue Devtools。它允许你在一个更友好的界面中审查和调试 Vue 应用。

vue引入方式

vue分成了两种版本: 开发版本(完整的警告和调试),生产版本(删除了警告,仅有33.46KB)

cdn引入

npm下载.// 适合大项目文件,更好的配合webpack等打包器使用(说简单点因为有包可以用)

命令行工具CLI

Vue 提供了一个官方的 CLI,为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验,以及生产环境可用的构建版本。

后面会补坑,我都记着呢

运行时 + 编译器 vs. 只包含运行时

如果你需要在客户端编译模板 (比如传入一个字符串给 template 选项,或挂载到一个元素上并以其 DOM 内部的 HTML 作为模板),就将需要加上编译器,即完整版:

// 需要编译器
new Vue({
  template'<div>{{ hi }}</div>'
})

// 不需要编译器
new Vue({
  render (h) {
    return h('div'this.hi)
  }
})

当使用 vue-loadervueify 的时候,*.vue 文件内部的模板会在构建时预编译成 JavaScript。你在最终打好的包里实际上是不需要编译器的,所以只用运行时版本即可。

因为运行时版本相比完整版体积要小大约 30%,所以应该尽可能使用这个版本。如果你仍然希望使用完整版,则需要在打包工具里配置一个别名:

webpack

module.exports = {
  // ...
  resolve: {
    alias: {
      'vue$''vue/dist/vue.esm.js' // 用 webpack 1 时需用 'vue/dist/vue.common.js'
    }
  }
}

这块解释很清楚了~ 能学到 两个版本的差别.

开发环境 vs. 生产环境模式

对于 UMD 版本来说,开发环境/生产环境模式是硬编码好的:开发环境下用未压缩的代码,生产环境下使用压缩后的代码。

CommonJS 和 ES Module 版本是用于打包工具的,因此我们不提供压缩后的版本。你需要自行将最终的包进行压缩。

CommonJS 和 ES Module 版本同时保留原始的 process.env.NODE_ENV 检测,以决定它们应该运行在什么模式下。你应该使用适当的打包工具配置来替换这些环境变量以便控制 Vue 所运行的模式。把 process.env.NODE_ENV 替换为字符串字面量同时可以让 UglifyJS 之类的压缩工具完全丢掉仅供开发环境的代码块,以减少最终的文件尺寸。

//webpack
//在 webpack 4+ 中,你可以使用 mode 选项:

module.exports = {
  mode'production'
}

这块不好理解.见我文章 commonjs 和 esmodule

回到vuejs介绍

声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统:

操作dom的命令式渲染如下:

image-20220427112005001
image-20220427112005001
image-20220427112151742
image-20220427112151742

第一个vue应用

image-20220427235658516
image-20220427235658516

我们已经成功创建了第一个 Vue 应用!看起来这跟渲染一个字符串模板非常类似,但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联,所有东西都是响应式的。我们要怎么确认呢?打开你的浏览器的 JavaScript 控制台 (就在这个页面打开),并修改 app.message 的值,你将看到上例相应地更新。

学术名词

  1. CLi命令行工具

  2. UMD:UMD 版本可以通过

分类:

前端

标签:

JavaScript

作者介绍

Shinkai005
V1

公众号:深海笔记Shinkai