学习目标
- 认识前端开发框架
- 了解Vue的核心特点
- 能安装和配置Node.js平台
- 能安装和配置Vue.CLI工具
- 能创建基础的Vue3项目
- 能使用npm命令启动项目
任务描述
学习Vue框架的基础知识，安装配置Vue开发运行的环境，创建并运行第一个Vue框架项目。
相关知识
- 前端框架基础
- Vue主要特点
- Node.js平台
- Vue.CLI脚手架工具
- Vue3项目创建
- npm命令
一、前端开发框架知识
1、前端开发框架介绍
前端框架（front-end framework）是一种为了简化和加速前端开发而创建的工具、库或软件系统。它提供了一套结构、规范和工具，用于组织、管理和展示用户界面（UI）元素，并协助开发者构建交互性高、可维护且具有良好用户体验的网页或应用程序。
前端框架通常包含以下主要组成部分：
（1）模板引擎（Template Engine）
用于定义和渲染用户界面的布局和内容。它可以将数据动态地绑定到界面上，实现数据与视图的同步更新。
（2）组件系统（Component System）
提供了一种组织、复用和分割用户界面的方法。通过将界面拆分成独立的组件，可以更好地管理代码、提高可维护性和重用性。
（3）路由管理（Routing）
用于管理应用程序中不同页面之间的导航和状态。它允许开发者定义页面路径、参数和导航逻辑，以便用户能够在应用程序中导航和访问特定的页面。
（4）状态管理（State Management）
用于管理应用程序的数据状态。它提供了一种集中式的方法来管理数据和状态的变化，使不同的组件能够共享和响应共享状态的更改。
（5）构建工具（Build Tools）
用于自动化构建、打包和优化前端资源，例如编译和压缩代码、处理静态资源、生成生产就绪的文件等。
（6）响应式设计（Responsive Design）
用于创建适应不同设备和屏幕尺寸的用户界面。它自动调整和布局页面，以适应不同的浏览器、平台和设备。
2、常用前端开发框架
（1）Vue
Vue (发音为 /vju?/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。（ 官网链接： https://cn.vuejs.org/ ）
（2）React
React是用于构建用户界面的JavaScript库，起源于Facebook的内部项目，该公司对市场上所有 JavaScript MVC框架都不满意，决定自行开发一套，用于架设Instagram的网站。于2013年5月开源。
React主要用于构建UI?？梢栽赗eact里传递多种类型的参数，如声明代码，帮助开发者渲染出UI、也可以是静态的HTML DOM元素、也可以传递动态变量、甚至是可交互的应用组件。（ 官网链接： https://react.dev/ ）
（3）Angular
AngularJS诞生于2009年，由Misko Hevery 等人创建，是一款构建用户界面的前端框架，后为Google所收购。AngularJS是一个应用设计框架与开发平台，用于创建高效、复杂、精致的单页面应用，通过新的属性和表达式扩展了 HTML，实现一套框架，多种平台，移动端和桌面端。AngularJS有着诸多特性，最为核心的是：MVVM、?？榛?、自动化双向数据绑定、语义化标签、依赖注入等等。
Angular是AngularJS的重写，Angular2以后官方命名为Angular，2.0以前版本称为AngularJS。AngularJS是用JavaScrip编写，而Angular采用TypeScript语言编写，是ECMAScript 6的超集。（ 官网链接： https://angular.cn/ ）
3、MVVM模式
MVVM(Model-View-ViewModel)是一种软件架构设计模式，它是一种简化用户界面的事件驱动编程方式。如图15-2-4 MVVM模式结构示意图所示。其中：
- Model为数据层 —— 指各种业务逻辑处理和数据操控。
- View为视图层 ——指前端用户界面。主要由HTML和CSS构成。
- ViewModel为视图数据层 —— 是数据层与视图层的桥梁，实现了数据与视图的分离。
【注】POJO（Plain Old JavaScript Object）是由一组键值对组成的数据结构，没有任何特殊的方法或函数
在MVVM架构下，View 和Model 之间并没有直接的联系，而是通过ViewModel进行交互，View数据的变化会同步到ViewModel上，ViewModel对数据的操作也会立即反应到View 上。ViewModel发起异步请求通知Model对数据进行处理，Model将数据的处理结果回传给ViewModel。
二、Vue框架
1、Vue框架介绍
以下为Vue官网的介绍：
Vue 是一个框架，也是一个生态。其功能覆盖了大部分前端开发常见的需求。但 Web 世界是十分多样化的，不同的开发者在 Web 上构建的东西可能在形式和规模上会有很大的不同?？悸堑秸庖坏?，Vue 的设计非常注重灵活性和“可以被逐步集成”这个特点。根据你的需求场景，你可以用不同的方式使用 Vue：
- 无需构建步骤，渐进式增强静态的 HTML
- 在任何页面中作为 Web Components 嵌入
- 单页应用 (SPA)
- 全栈 / 服务端渲染 (SSR)
- Jamstack / 静态站点生成 (SSG)
- 开发桌面端、移动端、WebGL，甚至是命令行终端中的界面
简单来说，我们可以根据项目的实际需要来使用Vue框架：
- 若我们的项目很简单，页面的数量也很少，此时可以只引入Vue.js直接使用（通过CDN引入或本地引入均可）
- 若我们的项目比较复杂，需要使用到Vue框架的更多功能，比如组件、路由、状态管理等，就可以使用Vue CLI 等工具来创建一个功能更为丰富的Vue项目
具体来说，我们可以通过以下三种方法来使用Vue框架：
- 通过CDN引入使用Vue.js
- 使用本地保存的Vue.js文件
- 使用Vue CLI创建Vue项目
接下来，我们通过三个实例来一一了解。
2、通过CDN使用Vue.js
在本方法中，我们创建一个demo1.html文件，然后通过CDN引入的方法来使用Vue.js，并初步了解Vue模板语法的使用方法。
（1）创建demo1.html文件
首先我们创建一个常规格式的demo1.html文件，在页面中显示一段文字，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CDN引入Vue.js实例</title>
</head>
<body>
<h1>Hello Vue -- CDN</h1>
</body>
</html>
使用网页浏览器预览的结果如图15-2-5 常规html页面预览图所示：
（2）通过CDN引入Vue.js
在页面的body中，使用script标签，直接通过CDN来引入Vue。
【注】CDN的全称是 Content Delivery Network，即内容分发网络。是构建在网络之上的内容分发网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能?？椋褂没Ь徒袢∷枘谌?，降低网络拥塞，提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术。
<body>
<h1>Hello Vue -- CDN</h1>
<!--直接通过CDN来引入vue -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</body>
看，就是这么简单，现在我们已经可以使用Vue为我们提供的功能了！
（3）使用Vue将变量显示到页面
在引入了Vue之后，我们可以使用JavaScript代码定义变量，并且很方便地显示在页面的DOM上。
接下来，我们将使用Vue框架语法来增加显示一行新的内容：
- 第1步：在body中新增一个div，定义id为app，在div中新增一个h1标签，标签中写入{{msg}}
- 第2步：创建一个Vue实例，并且定义一个字符串变量msg，值为“这是CDN引入Vue.js实例”
修改后的代码如下：
<body>
<h1>Hello Vue -- CDN</h1>
<!-- 第1步 -->
<div id="app">
<h1>{{msg}}</h1>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<!-- 第2步 -->
<script>
const { createApp } = Vue;
createApp({
data(){
return {
msg: "这是CDN引入Vue.js实例"
}
}
}).mount('#app')
</script>
</body>
上面代码的写法，可能大家会有些陌生，不过没有关系，让我们先来看看修改后页面的显示内容，如图15-2-5 引入Vue后页面预览图所示，再来进行解释。
刷新浏览器后，我们看见页面中增加了一行内容，显示的正是我们定义的msg变量所对应的值。说明我们已经成功地使用Vue动态显示页面内容?？烧庥质侨绾问迪值哪兀?br>
接下来我们来逐步介绍页面中使用Vue的方法：
1、body标签布局部分：
（1）在body中增加了一个div标签，并且定义其id为app
（2）在div中，增加了一个h1标签，在标签中使用"Mustache语法"（双大括号）绑定msg变量
2、script标签脚本部分：
（1）使用ES6的解构赋值语法 " const { createApp } = Vue " 从Vue模块中导入createApp函数，并将其赋值给一个常量createApp
（2）使用createApp函数创建一个Vue实例，并且使用 " mount('#app') " 方法将该实例挂载到布局中id为app的DOM元素上
（3）在createApp函数创建的Vue实例中包含了data选项的对象，data返回了一个包含键值对的对象，其键为msg，值为"这是CDN引入Vue.js实例"
3、当Vue实例被创建后，它将 data 中的所有属性加入到Vue的响应式系统中，这些属性的值被定义或者发生改变时，视图层（即布局内容）将产生“响应”，自动匹配更新为新的值。
【注】Mustache语法（又称大胡子语法，由两对大括号标记）是一套logic-less（轻逻辑）的模板解析引擎。它可以用来处理 HTML 、配置文件、源代码等任何文件。它把模板中的标签展开成给定的数据映射或者对象中的属性值?？梢杂τ迷贘avaScript、PHP、Perl等多种语言中
2、使用本地保存的Vue.js文件
在某些特定的情况下，项目可能要求我们不使用CDN，而是将Vue.js作为项目本地文件直接引用。那么我们就可以将此js文件下载到本地来使用。
具体实现步骤如下：
（1）打开Vue.js文件
使用浏览器打开CDN中指向的js文件地址：
（2）下载Vue.js文件
使用浏览器将文件保存为本地的vue.global.js文件
（3）使用Vue.js文件
在html文件中引入本地vue.global.js文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>引入本地Vue.js文件实例</title>
</head>
<body>
<h1>Hello Vue -- CDN</h1>
<div id="app">
<h1>{{msg}}</h1>
</div>
<!--引入本地vue.global.js文件 -->
<script src="./vue.global.js"></script>
<script>
const { createApp } = Vue;
createApp({
data(){
return {
msg: "这是引入本地vue.global.js文件实例"
}
}
}).mount('#app')
</script>
</body>
</html>
(4）访问页面
使用浏览器打开demo2.html文件，确认引用本地Vue.js文件成功。
3、使用Vue CLI创建Vue项目
之前的两种方式适用于页面较少的项目，可以只引入Vue.js直接使用。但通常情况下，一个完整的前端项目会涉及到组件、路由、状态管理等各方面的需求，这时，我们就可以使用Vue CLI来创建一个功能更为丰富的Vue项目。
在创建项目之前，我们需要先安装项目创建和运行所需的Node.js环境与Vue CLI。
（1）Node.js简介
Node.js发布于2009年5月，由Ryan Dahl开发，是一个基于Chrome V8引擎的JavaScript运行时环境，使得JavaScript可以在服务器端运行。它提供了一组用于开发Web服务器和其他网络应用的工具和库，它让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言。
Node.js的主要特点包括：
- 非阻塞I/O模型：Node.js使用事件驱动、非阻塞I/O模型，使得程序可以并发处理大量的请求，而不会因为阻塞I/O操作而导致性能下降。
- 轻量高效：由于使用了V8引擎，Node.js具有快速的代码执行速度和低内存消耗，适合处理高并发的请求。
- 单线程：Node.js使用单线程的事件循环机制，减少了线程切换和上下文切换的开销，使得并发性能更高。
- 跨平台：Node.js可以在多个操作系统上运行，包括Windows、Mac和Linux等。
（2）npm简介
Node.js附带了一个强大的包管理工具npm（Node Package Manager）包管理器，是一个用于安装、管理和分享JavaScript代码的工具。通过npm，开发者可以轻松地安装和管理第三方?？?、库和工具，以及发布自己的包供他人使用。
npm具有以下核心功能和特点：
- 包管理：npm允许你安装、升级、删除和管理项目依赖的模块和包。你可以在项目根目录下的 package.json 文件中定义项目依赖，并通过运行 npm install 命令来安装所有依赖。
- 包发布：你可以使用npm将自己开发的?？楹涂夥⒉嫉絥pm，供其他开发者使用。通过运行 npm publish 命令，你可以发布自己的包，并将其在npm上注册。
- 版本管理：npm使用语义化版本（Semantic Versioning）来管理?？楹桶陌姹?。每个发布的包都有一个版本号，你可以指定依赖?？榈陌姹痉段?，以确保兼容性和可靠性。
- 命令行工具：npm提供了一个命令行界面，用于执行各种操作，如安装、发布、更新、搜索、测试等。你可以使用 npm install 安装依赖， npm run 运行自定义脚本， npm search 搜索可用的?？榈?。
- 全局安装：除了在项目中使用本地安装的模块，npm还支持全局安装?？?，以供系统中的所有项目使用。你可以通过 npm install -g 命令将?？槿职沧?。
无论是在个人项目还是团队开发中，npm都是JavaScript开发中常用的工具之一。它为开发者提供了便捷的代码共享和管理机制，有利于构建高质量的JavaScript应用程序。
（3）Vue CLI简介
Vue CLI (Vue Command-Line Interface) 是一个官方提供的用于快速搭建和管理Vue项目的命令行工具。它提供了一套交互式的脚手架，可帮助开发者快速搭建Vue项目的基础结构，并提供了大量可选的插件和工具，简化了项目配置和开发流程。
使用Vue CLI可以获得以下好处：
- 快速创建项目：Vue CLI提供了一个交互式的命令行界面，可帮助你快速创建一个基于Vue.js的项目。它会为你生成项目的基本目录结构和配置文件，并自动安装所需的依赖。
- 管理插件和工具：Vue CLI支持使用插件和工具来扩展项目的功能。你可以通过简单的命令行操作来添加、升级或移除插件，以满足项目的需求。
- 配置管理：Vue CLI提供了一个易于使用的配置文件，用于管理项目的构建和开发配置。你可以在配置文件中定制构建过程、配置开发服务器、添加Babel、ESLint、TypeScript等支持。
- 内置指令：Vue CLI提供了方便的指令来运行开发服务器、构建生产版本、运行测试等常用任务。它们都经过优化和自动化的配置，可使你更专注于开发而不是繁琐的配置过程。
要使用Vue CLI，我们首先需要安装Node.js和npm，然后使用npm安装Vue CLI。安装完成后，我们就可以通过运行 vue create 命令来创建我们的Vue项目。
4、安装Node.js环境
在Node.js官网（https://nodejs.org/）下载对应版本的安装包：
下载完成后，双击安装包进行安装：
（5）确认安装结果
打开Windows命令行工具，输入查看node版本的命令并执行：
node -v
输入查看npm版本的命令并执行：
npm -v
5、安装Vue CLI
在成功安装了Node.js 与npm工具后，就可以使用npm命令安装Vue CLI：
npm install -g @vue/cli
npm的默认配置是使用官方的包存储服务器，官方服务器位于全球各地，并且通常在国外?？赡芑岢鱿址梦仕俣冉下那榭觥Ｎ私饩稣飧鑫侍?，国内的一些厂商提供了npm的镜像服务器，例如淘宝的npm镜像（cnpm）。这些镜像服务器基本上是将npm服务器的内容复制到国内的服务器上，并提供更快的访问速度。通过将npm的下载源切换到国内镜像，可以显著加快包的下载速度。
另一方面，尽管cnpm在国内使用具有优势，但由于淘宝镜像数据同步和稳定性的原因，有时可能会导致一些包的版本不一致或者不完全可用。因此，在实际开发中，如果我们遇到任何问题或冲突，建议切换回使用npm或采取适当的解决方法。
以下为使用国内镜像的安装方式：
首先，使用npm安装国内镜像cnpm：
npm install -g cnpm --registry=https://registry.npm.taobao.org
其次，将npm下载源切换为cnpm的源：
npm config set registry https://registry.npm.taobao.org
然后，我们就可以使用cnpm命令，使用国内镜像来安装Vue CLI了：
cnpm install -g @vue/cli
安装成功后，输入查看Vue CLI 版本的命令并执行：
vue/cli -V
6、创建Vue项目
在完成环境和工具的安装之后，我们现在可以开始创建我们自己的Vue项目了！
（1）执行创建项目命令
输入创建项目命令，创建一个名为 my_test_vue 的项目：
vue create my_test_vue
（2）选择项目预设选项
在选择项目预设页面中，我们可以根据自己的需要逐步设置：
使用键盘的上下键切换选项，上图中的选项分别为：
- 前面几行选项（myDemo, myTest, 0530mmm等）为之前保存的自定义配置选项，可直接选择使用
- Defalue([Vue 3] babel, eslint)：为系统预设的Vue3基础配置选项
- Defalue([Vue 2] babel, eslint)：为系统预设的Vue2基础配置选项
- Manually select features：为手动选择配置
我们选择“Defalue([Vue 3] babel, eslint)”，按回车键确认，创建一个系统预设的Vue3基础配置项目：
（3）启动项目
进入新创建的项目目录：
cd my_test_vue
使用npm命令启动项目：
使用浏览器访问项目：
根据项目启动成功界面中的提示，我们可以使用浏览器访问创建的my_test_vue项目，以下两种访问方式均可：
- 本地访问方式：访问 http://localhost:8080/ 地址
- 网络访问方式：访问 http://192.168.3.93:8080/ 地址
（4）注意事项
（1）Windows命令行工具默认在C盘用户目录下执行，所以项目也将自动创建在该目录下。实际开发中，需要选择在合适的目录下执行创建项目命令。
（2）我们创建的项目名称不能有大写字母，否则会报错如下：
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事?！?“怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- Vue.js是一套构建用户界面的渐进式框架。它既集众多优秀前端框架之大成，又保持了其简单易用的特点。对vue.js...
- RogerZhong @ 2023-04 一、前端开发主流三大框架 Vue ： 尤雨溪主导开发 （ 官网链接： h...
- Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue ...
- 全栈的自我修养: 使用@vue/cli进行vue.js环境搭建 Success, real success, is...
