Vue.js 前端开发实战之 01-Vue 基础入门

初识 Vue

前端技术的发展

前端技术发展历程：

主流的前端框架

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

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

Vue 简介

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

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

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

Vue 目前有两个大版本：

Vue 2 文档：https://v2.cn.vuejs.org/
Vue 3 文档：https://cn.vuejs.org/

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）：

html 复制代码

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

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

Node.js

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

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

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

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

终端执行：

powershell 复制代码

node -v

示例效果：

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

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

helloworld.js：

javascript 复制代码

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

终端执行：

powershell 复制代码

node helloworld.js

示例效果：

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

示例：在 REPL 中运行 JavaScript 代码

终端执行：

powershell 复制代码

# 进入REPL交互式环境
node

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

# 退出REPL交互式环境
.exit

示例效果：

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 镜像服务器

终端执行：

powershell 复制代码

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

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

示例效果：

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）：

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>

示例效果：

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

终端执行：

powershell 复制代码

# 全局安装webpack
npm install webpack -g

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

# 查看webpack版本信息
webpack -v

示例效果：

webpack 简单使用

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

示例：使用 webpack 打包 JavaScript 项目

example.js：

javascript 复制代码

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

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

终端执行：

powershell 复制代码

webpack ./example.js

dist/main.js：

javascript 复制代码

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

示例效果：