Vue.js Tutorial이 칼럼에서는 Vue.js에 대한 학습 계획과 이해를 함께 배울 수 있습니다.
이 스터디 노트는 제가 Vue.js 프레임워크를 학습하면서 개인적으로 작성한 프로그램 코드와 학습 경험 중 일부를 기록할 것입니다. 이를 위해 ProgrammingLanguage/JavaScript 디렉터리 아래에 vuejs라는 디렉터리를 만들고 이 디렉터리 아래에 다음 두 개의 하위 디렉터리를 설정하겠습니다. ProgrammingLanguage/JavaScript目录下创建一个名为的vuejs目录，并在该目录下设置以下两个子目录：
note目录用于存放markdown格式的笔记。code目录则用于存放笔记中所记录的程序代码。这部分笔记将记录我对 Vue.js 框架的概念性了解，以及在项目中引入该框架的具体方法，并编写一个"Hello World"程序。
Vue.js 是一套用于构建用户界面的渐进式框架。该框架被设计为可以自底向上逐层应用，它的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue.js 也完全能够为复杂的单页应用提供驱动。简而言之，Vue.js 具有以下特性：
当然，由于 Vue.js 的作者本身是一个中国人，所以 Vue.js 社区的中文资料也相比其他 JavaScript 框架社区要丰富一些，这对于很多习惯中文阅读的用户来说，或许也是选择使用这一框架的原因。
和大多数 JavaScript 前端程序库和应用框架一样，在自己的项目中引入 Vue.js 框架主要有 CDN 引用和本地引用两种方式，下面分别来学习一下它们。
CDN 是内容分发网络（Content Delivery Network 或 Content Distribution Network）的缩写，这是一种利用现有的互联网络系统中最靠近目标用户的服务器，更快、更可靠地分发音乐、图片、视频、应用程序以及其他数据资料的方式，目的是提供高性能、可扩展性及低成本的网络内容传递给用户。换而言之，在使用 CDN 这种引用方式时，Vue.js 框架文件会被存储在指定的 CDN 服务网络的某个服务器节点上，由该服务来集中负责针对该框架文件的访问负载并维护该框架的版本，而我们只要在 HTML 文档的<script>标签中引用相应 CDN 服务的 URL 即可，像这样：
<!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- 或者 --> <!-- 生产环境版本，优化了文件大小和载入速度 --> <script src="https://cdn.jsdelivr.net/npm/vue"></script>
在上述示例中，我测试了使用cdn.jsdelivr.net
note 디렉토리는 markdown 형식으로 메모를 저장하는 데 사용됩니다. code 디렉토리는 노트에 기록된 프로그램 코드를 저장하는 데 사용됩니다. <script> 태그에서 해당 CDN 서비스의 URL을 참조하면 됩니다. 🎜npm install vue --save # 如果需要相应的权限，可以使用 sudo 命令来提权
当然了，这种引用方式归根结底都得依赖于网络环境，甚至很多时候是国外的网络环境，由于众所周知的原因，我们的网络环境经常会受到各种不可抗力的影响，所以我个人更倾向于将框架文件下载到本地来引用。
正如上面所说，如果想减少意外状况，最好的选择是将 Vue.js 的框架文件下载到本地，然后再引用它们。下载这类文件的方式有很多，现如今为了便于更新版本，人们通常会选择使用 npm 这类包管理器来下载 JavaScript 的各种程序库和应用框架。具体做法就是在之前创建的code目录下执行以下命令：
npm install vue --save # 如果需要相应的权限，可以使用 sudo 命令来提权
如果安装过程一切顺利，接下来就只需要在 HTML 文档的<script>标签中引用框架文件的路径即可，像这样：
<!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="node_modules/vue/dist/vue.js"></script> <!-- 或者 --> <!-- 生产环境版本，优化了文件大小和载入速度 --> <script src="node_modules/vue/dist/vue.min.js"></script>
在这里，选择开发环境版本还是生产环境版本的依据是一样的，就不再重复了。下面来验证一下框架文件是否被成功引入。
我将通过编写一个"Hello World"程序来验证 Vue.js 框架是否已被成功引入，具体步骤如下：
在code目录下创建一个名为01_sayHello的项目目录，并在该目录下设置以下两个子目录：
img目录：用于存放图片资源。js目录：用于存放自定义 JavaScript 脚本文件。将名为logo.png的图表文件存储到code/01_sayHello/img目录中。
在code/01_sayHello目录中创建一个名为index.htm的 HTML 文档，并在其中输入如下代码：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script defer="defer" src="../node_modules/vue/dist/vue.js"></script>
<script defer="defer" src="js/main.js"></script>
<title>你好，Vue.js</title>
</head>
<body>
<p id="app">
<h1> {{ sayHello }} </h1>
<img :src="vueLogo" style="width:200px">
</p>
</body>
</html>在code/01_sayHello/js目录中创建一个名为main.js的 JavaScript 脚本文档，并在其中输入如下代码：
// 程序名称： sayHello
// 实现目标：
// 1. 验证 Vue.js 执行环境
// 2. 体验构建 Vue.js 程序的基本步骤
const app = new Vue({
el: '#app',
data:{
sayHello: '你好，Vue.js！',
vueLogo: 'img/logo.png'
}
});接下来只需将相关的 Web 服务运行起来（该服务器可以是 Apache 或者 Nginx，也可以是 VSCode 的 Live Sever 插件），然后如果在 Web 浏览器中看到如下页面，就说明 Vue.js 框架已经被引入到了程序中，并被成功执行起来了。
更多相关免费学习推荐：js视频教程
위 내용은 Vue.js 학습 기록 1: Vue.js 계획 및 이해 학습의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
