初识 Vue

前端技术的发展

前端技术发展历程：

主流的前端框架

目前前端开发领域中的主流框架：

  • jQuery：快速、小巧且功能丰富的 JavaScript 库。
  • Bootstrap：由 Twitter 开发的前端框架，可以快速创建响应式和移动优先的网站。
  • React：由 Facebook 创建并维护的开源 JavaScript 库，支持虚拟 DOM，提供声明式编程范式。
  • Angular：由 Google 维护的开源的前端框架，提供了丰富的功能，如双向数据绑定等。
  • Vue：由尤雨溪于 2014 年 2 月发布的的渐进式框架，Vue 以其简洁的 API、响应式数据绑定和组件化的架构而受到广泛欢迎。
  • ......

Vue 简介

Vue 是一套用于构建用户界面的渐进式框架。

  • Vue 被设计为可以自底向上逐层应用。
  • 渐进式是一种设计理念，即在不失去当前功能的前提下，逐步添加新的特性。
  • 开发者可以根据项目的复杂程度和团队的成熟度，逐渐引入更多 Vue 相关的技术和工具。

Vue 渐进式架构从核心到周边工具：

Vue 目前有两个大版本：

Vue 基本工作原理

MVVM 基本架构：

Vue 的基本工作原理：MVVM。

  • View 即视图，Model 即模型，ViewModel 即视图模型。
  • ViewModel 负责监听视图的事件，并基于这些事件更新模型中的数据。
  • 当模型中的数据变化时，ViewModel 也负责自动更新视图，使视图始终与模型保持同步。
  • Vue 通过双向数据绑定和响应式更新机制实现了 MVVM 模式。

Vue 优缺点

Vue 的优点：

  • 轻量级：Vue 简单、直接，所以 Vue 使用起来更加友好。
  • 数据绑定：数据驱动视图，视图也可以驱动数据。
  • 指令：指令绑定在元素上时，指令会给绑定的元素添加一些特殊的行为。
  • 插件：插件用于对 Vue 框架功能进行扩展。
  • ......

Vue 的缺点：

  • 不够成熟：Vue 相比于其他框架还是比较新的，社区和生态系统还在发展中。
  • 不够标准化：Vue 没有强制遵循一种特定的编码风格或者架构模式。
  • 不够稳定：Vue 更新比较频繁，有时候会引入一些不兼容的变化或者废弃一些特性。
  • ......

搭建 Vue 开发环境

IDE

Visual Studio Code、IDEA、WebStorm、HbuilderX 均可开发 Vue 项目，推荐直接使用 IDEA 作为 Vue 项目开发所使用的 IDE。

在 IDEA 中，自带支持 Vue 项目的插件。

vue.js

vue.js 下载：https://v2.cn.vuejs.org/v2/guide/installation.html

  • 开发版本 vue.js：包含完整的警告和调试模式。
  • 生产版本 vue.min.js：删除了警告，压缩了代码，提高生产环境的访问速度。

在前端项目中，可以使用不同的方式引入 vue.js。

示例：引入 vue.js

入口页面（index.html）：

<!-- 本地引入 -->
<script src="/static/js/vue.js"></script>

<!-- 远程引入 -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.16/vue.js"></script>

示例仓库：https://www.duozai.cn/link/CCe9X9PW/

Node.js

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，它可以让 JavaScript 代码运行在服务器端，让 JavaScript 代码脱离浏览器，直接在计算机上运行。

Node.js 下载：https://www.nodejs.com.cn/

Node.js 安装完成后，可以在终端中查看 Node.js 的版本信息。

示例：查看 Node.js 版本信息

终端执行：

node -v

示例效果：

示例仓库：https://www.duozai.cn/link/XTiMeVmx/

在 Node.js 中，可以直接运行 JavaScript 文件。

示例：在 Node.js 中运行 JavaScript 文件

helloworld.js：

console.log('hello, node.js')

终端执行：

node helloworld.js

示例效果：

示例仓库：https://www.duozai.cn/link/KVvM25gy/

在 Node.js 中，还可以使用 REPL 交互式环境来运行 JavaScript 代码。

示例：在 REPL 中运行 JavaScript 代码

终端执行：

# 进入REPL交互式环境
node

# 执行JavaScript代码
console.log('hello, node.js')

# 退出REPL交互式环境
.exit

示例效果：

示例仓库：https://www.duozai.cn/link/v0XoPBMI/

npm

npm 是一个 Node.js 的包管理工具，在安装 Node.js 的时候会自动安装相应版本的 npm。

npm 的基本命令：

名称描述
npm -v查看 npm 版本信息。
npm install安装项目所需要的全部包。
npm install 包名 -g安装指定的包（全局安装）。
npm install 包名 -save安装指定的包（本地安装）。
npm uninstall 包名卸载指定名称的包。
npm update 包名更新指定的包。

项目所需要用到的依赖包信息，可以在 npm 仓库中搜索：https://www.npmjs.com/

由于 npm 的服务器在国外，使用 npm 下载软件包的速度可能很慢，可以将 npm 镜像服务器切换为国内的镜像服务器以提高下载速度。

示例：切换 npm 镜像服务器

终端执行：

# 设置为阿里镜像源
npm config set registry https://registry.npmmirror.com

# 查看npm镜像源地址
npm config get registry

示例效果：

示例仓库：https://www.duozai.cn/link/8pdizzc5/

vue-devtools

vue-devtools 是一款基于谷歌浏览器的拓展，用于调试 Vue 应用。

在 Microsoft Edge 浏览器的拓展中，可以直接搜索并下载 vue-devtools。

其他基于谷歌内核的浏览器，可以在第三方插件中心中直接搜索并下载扩展插件。

极简插件：https://chrome.zzzmh.cn/

Hello Vue

Vue 开发环境搭建完成后，可以创建一个 HTML 项目，开启第一个 Vue 案例。

Vue 开发基本步骤：

  • 新建 HTML 文件，并使用 script 标签引入 vue.js。
  • 在页面中定义一个 div 盒子，并指定盒子的 id 属性。
  • 实例化 Vue 实例。
  • 在 div 盒子中，使用插值表达式 {{属性名}} 显示 Vue 中的数据。

示例：Hello Vue

入口页面（index.html）：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入vue.js -->
    <script src="vue.js"></script>
</head>
<body>
<!-- 定义一个div盒子 -->
<div id="app">
    <!-- 显示Vue的数据 -->
    <h3>{{message}}</h3>
</div>

<script>
    // 创建Vue实例
    let vm = new Vue({
        // el：Vue要控制的页面区域（将div盒子托管给Vue）
        el: "#app",
        // data：Vue控制的区域的数据
        data: {
            message: "Hello，Vue.js!"
        }
    })
</script>
</body>
</html>

示例效果：

示例仓库：https://www.duozai.cn/link/VemfbhQQ/

webpack

webpack 简介

webpack 是一个模块打包工具，可以把前端项目中的 js、css 等文件打包在一起，实现自动化构建。

webpack 的核心作用：

  • 代码压缩：将 JavaScript、CSS 代码混淆压缩，让代码体积更小、加载更快。
  • 编译语法：编写 CSS 时使用 Less/Sass，编写 JavaScript 时使用 ES6、TypeScript 等，这些标准目前都无法被浏览器兼容，需要使用构建工具编译。
  • 处理模块化：使用构建工具处理模块化的 JavaScript、CSS 代码。
  • ......

使用 webpack 打包前端项目，需要安装 webpack 和 webpack-cli。

webpack 需要依赖 webpack-cli 才能使用，最新版的 webpack 已经集成了 webpack-cli，如果没有集成 webpack-cli，需要手动安装。

示例：安装 webpack

终端执行：

# 全局安装webpack
npm install webpack -g

# 全局安装webpack-cli
npm install webpack-cli -g

# 查看webpack版本信息
webpack -v

示例效果：

示例仓库：https://www.duozai.cn/link/vpPUgeIU/

webpack 简单使用

webpack 和 webpack-cli 安装完成后，可以创建一个前端项目，使用 webpack 进行打包。

示例：使用 webpack 打包 JavaScript 项目

example.js：

function add(a, b) {
    return a + "+" + b + "的结果是：" + (a + b);
}

console.log(add(30, 70));

终端执行：

webpack ./example.js

dist/main.js：

console.log("30+70的结果是：100");

示例效果：

示例仓库：https://www.duozai.cn/link/IG5zAzY4/