墨滴

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-loader 或 vueify 的时候，*.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