Vue.js教學專欄介紹學習規劃和了解 Vue.js，可以一起來學習。
這篇學習筆記將記錄一些我個人在學習 Vue.js 框架時所寫的程式碼與學習心得。為此，我會在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提供的CDN 服務來引用Vue.js 框架，這也是Vue.js 官方教學中推薦的服務。至於是該引用開發環境的版本，還是生產環境的版本，這就要取決於具體的使用場景了。在通常情況下，我會選擇在程式開發階段引用回饋資訊相對豐富的開發環境版本，而等到程式發布之時再切換到更追求執行效率的生產環境版本。下面來了解一下使用 CDN 這種引用方式的優點：
当然了，这种引用方式归根结底都得依赖于网络环境，甚至很多时候是国外的网络环境，由于众所周知的原因，我们的网络环境经常会受到各种不可抗力的影响，所以我个人更倾向于将框架文件下载到本地来引用。
正如上面所说，如果想减少意外状况，最好的选择是将 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 學習記錄之一：學習規劃與了解 Vue.js的詳細內容。更多資訊請關注PHP中文網其他相關文章！
