任務1：搭建Vue開發(fā)環(huán)境

學習目標

  1. 認識前端開發(fā)框架
  2. 了解Vue的核心特點
  3. 能安裝和配置Node.js平臺
  4. 能安裝和配置Vue.CLI工具
  5. 能創(chuàng)建基礎的Vue3項目
  6. 能使用npm命令啟動項目

任務描述

學習Vue框架的基礎知識，安裝配置Vue開發(fā)運行的環(huán)境，創(chuàng)建并運行第一個Vue框架項目。

相關知識

  1. 前端框架基礎
  2. Vue主要特點
  3. Node.js平臺
  4. Vue.CLI腳手架工具
  5. Vue3項目創(chuàng)建
  6. npm命令

一、前端開發(fā)框架知識

1、前端開發(fā)框架介紹

前端框架（front-end framework）是一種為了簡化和加速前端開發(fā)而創(chuàng)建的工具、庫或軟件系統(tǒng)。它提供了一套結(jié)構(gòu)、規(guī)范和工具，用于組織、管理和展示用戶界面（UI）元素，并協(xié)助開發(fā)者構(gòu)建交互性高、可維護且具有良好用戶體驗的網(wǎng)頁或應用程序。

前端框架通常包含以下主要組成部分：

（1）模板引擎（Template Engine）
用于定義和渲染用戶界面的布局和內(nèi)容。它可以將數(shù)據(jù)動態(tài)地綁定到界面上，實現(xiàn)數(shù)據(jù)與視圖的同步更新。

（2）組件系統(tǒng)（Component System）
提供了一種組織、復用和分割用戶界面的方法。通過將界面拆分成獨立的組件，可以更好地管理代碼、提高可維護性和重用性。

（3）路由管理（Routing）
用于管理應用程序中不同頁面之間的導航和狀態(tài)。它允許開發(fā)者定義頁面路徑、參數(shù)和導航邏輯，以便用戶能夠在應用程序中導航和訪問特定的頁面。

（4）狀態(tài)管理（State Management）
用于管理應用程序的數(shù)據(jù)狀態(tài)。它提供了一種集中式的方法來管理數(shù)據(jù)和狀態(tài)的變化，使不同的組件能夠共享和響應共享狀態(tài)的更改。

（5）構(gòu)建工具（Build Tools）
用于自動化構(gòu)建、打包和優(yōu)化前端資源，例如編譯和壓縮代碼、處理靜態(tài)資源、生成生產(chǎn)就緒的文件等。

（6）響應式設計（Responsive Design）
用于創(chuàng)建適應不同設備和屏幕尺寸的用戶界面。它自動調(diào)整和布局頁面，以適應不同的瀏覽器、平臺和設備。

2、常用前端開發(fā)框架

（1）Vue

圖15-2-1 Vue Logo

Vue (發(fā)音為 /vju?/，類似 view) 是一款用于構(gòu)建用戶界面的 JavaScript 框架。它基于標準 HTML、CSS 和 JavaScript 構(gòu)建，并提供了一套聲明式的、組件化的編程模型，幫助你高效地開發(fā)用戶界面。無論是簡單還是復雜的界面，Vue 都可以勝任。（ 官網(wǎng)鏈接： https://cn.vuejs.org/ ）

（2）React

圖15-2-2 React logo

React是用于構(gòu)建用戶界面的JavaScript庫，起源于Facebook的內(nèi)部項目，該公司對市場上所有 JavaScript MVC框架都不滿意，決定自行開發(fā)一套，用于架設Instagram的網(wǎng)站。于2013年5月開源。
React主要用于構(gòu)建UI?？梢栽赗eact里傳遞多種類型的參數(shù)，如聲明代碼，幫助開發(fā)者渲染出UI、也可以是靜態(tài)的HTML DOM元素、也可以傳遞動態(tài)變量、甚至是可交互的應用組件。（ 官網(wǎng)鏈接： https://react.dev/ ）

（3）Angular

圖15-2-3 Angular logo

AngularJS誕生于2009年，由Misko Hevery 等人創(chuàng)建，是一款構(gòu)建用戶界面的前端框架，后為Google所收購。AngularJS是一個應用設計框架與開發(fā)平臺，用于創(chuàng)建高效、復雜、精致的單頁面應用，通過新的屬性和表達式擴展了 HTML，實現(xiàn)一套框架，多種平臺，移動端和桌面端。AngularJS有著諸多特性，最為核心的是：MVVM、模塊化、自動化雙向數(shù)據(jù)綁定、語義化標簽、依賴注入等等。
Angular是AngularJS的重寫，Angular2以后官方命名為Angular，2.0以前版本稱為AngularJS。AngularJS是用JavaScrip編寫，而Angular采用TypeScript語言編寫，是ECMAScript 6的超集。（ 官網(wǎng)鏈接： https://angular.cn/ ）

3、MVVM模式

MVVM(Model-View-ViewModel)是一種軟件架構(gòu)設計模式，它是一種簡化用戶界面的事件驅(qū)動編程方式。如圖15-2-4 MVVM模式結(jié)構(gòu)示意圖所示。其中：

  • Model為數(shù)據(jù)層 —— 指各種業(yè)務邏輯處理和數(shù)據(jù)操控。
  • View為視圖層 ——指前端用戶界面。主要由HTML和CSS構(gòu)成。
  • ViewModel為視圖數(shù)據(jù)層 —— 是數(shù)據(jù)層與視圖層的橋梁，實現(xiàn)了數(shù)據(jù)與視圖的分離。
圖15-2-4 MVVM模式結(jié)構(gòu)示意圖

【注】POJO（Plain Old JavaScript Object）是由一組鍵值對組成的數(shù)據(jù)結(jié)構(gòu)，沒有任何特殊的方法或函數(shù)

在MVVM架構(gòu)下，View 和Model 之間并沒有直接的聯(lián)系，而是通過ViewModel進行交互，View數(shù)據(jù)的變化會同步到ViewModel上，ViewModel對數(shù)據(jù)的操作也會立即反應到View 上。ViewModel發(fā)起異步請求通知Model對數(shù)據(jù)進行處理，Model將數(shù)據(jù)的處理結(jié)果回傳給ViewModel。

二、Vue框架

1、Vue框架介紹

以下為Vue官網(wǎng)的介紹：
Vue 是一個框架，也是一個生態(tài)。其功能覆蓋了大部分前端開發(fā)常見的需求。但 Web 世界是十分多樣化的，不同的開發(fā)者在 Web 上構(gòu)建的東西可能在形式和規(guī)模上會有很大的不同?？紤]到這一點，Vue 的設計非常注重靈活性和“可以被逐步集成”這個特點。根據(jù)你的需求場景，你可以用不同的方式使用 Vue：

  • 無需構(gòu)建步驟，漸進式增強靜態(tài)的 HTML
  • 在任何頁面中作為 Web Components 嵌入
  • 單頁應用 (SPA)
  • 全棧 / 服務端渲染 (SSR)
  • Jamstack / 靜態(tài)站點生成 (SSG)
  • 開發(fā)桌面端、移動端、WebGL，甚至是命令行終端中的界面

簡單來說，我們可以根據(jù)項目的實際需要來使用Vue框架：

  • 若我們的項目很簡單，頁面的數(shù)量也很少，此時可以只引入Vue.js直接使用（通過CDN引入或本地引入均可）
  • 若我們的項目比較復雜，需要使用到Vue框架的更多功能，比如組件、路由、狀態(tài)管理等，就可以使用Vue CLI 等工具來創(chuàng)建一個功能更為豐富的Vue項目

具體來說，我們可以通過以下三種方法來使用Vue框架：

  • 通過CDN引入使用Vue.js
  • 使用本地保存的Vue.js文件
  • 使用Vue CLI創(chuàng)建Vue項目

接下來，我們通過三個實例來一一了解。

2、通過CDN使用Vue.js

在本方法中，我們創(chuàng)建一個demo1.html文件，然后通過CDN引入的方法來使用Vue.js，并初步了解Vue模板語法的使用方法。

（1）創(chuàng)建demo1.html文件

首先我們創(chuàng)建一個常規(guī)格式的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>

使用網(wǎng)頁瀏覽器預覽的結(jié)果如圖15-2-5 常規(guī)html頁面預覽圖所示：


圖15-2-5 常規(guī)html頁面預覽圖

（2）通過CDN引入Vue.js

在頁面的body中，使用script標簽，直接通過CDN來引入Vue。

【注】CDN的全稱是 Content Delivery Network，即內(nèi)容分發(fā)網(wǎng)絡。是構(gòu)建在網(wǎng)絡之上的內(nèi)容分發(fā)網(wǎng)絡，依靠部署在各地的邊緣服務器，通過中心平臺的負載均衡、內(nèi)容分發(fā)、調(diào)度等功能模塊，使用戶就近獲取所需內(nèi)容，降低網(wǎng)絡擁塞，提高用戶訪問響應速度和命中率。CDN的關鍵技術主要有內(nèi)容存儲和分發(fā)技術。

<body>
  <h1>Hello Vue -- CDN</h1> 
  <!--直接通過CDN來引入vue -->
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</body>

看，就是這么簡單，現(xiàn)在我們已經(jīng)可以使用Vue為我們提供的功能了！

（3）使用Vue將變量顯示到頁面

在引入了Vue之后，我們可以使用JavaScript代碼定義變量，并且很方便地顯示在頁面的DOM上。
接下來，我們將使用Vue框架語法來增加顯示一行新的內(nèi)容：

  • 第1步：在body中新增一個div，定義id為app，在div中新增一個h1標簽，標簽中寫入{{msg}}
  • 第2步：創(chuàng)建一個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>

上面代碼的寫法，可能大家會有些陌生，不過沒有關系，讓我們先來看看修改后頁面的顯示內(nèi)容，如圖15-2-5 引入Vue后頁面預覽圖所示，再來進行解釋。


圖15-2-5 CDN引入Vue頁面預覽圖

刷新瀏覽器后，我們看見頁面中增加了一行內(nèi)容，顯示的正是我們定義的msg變量所對應的值。說明我們已經(jīng)成功地使用Vue動態(tài)顯示頁面內(nèi)容?？蛇@又是如何實現(xiàn)的呢？
接下來我們來逐步介紹頁面中使用Vue的方法：
1、body標簽布局部分：
（1）在body中增加了一個div標簽，并且定義其id為app
（2）在div中，增加了一個h1標簽，在標簽中使用"Mustache語法"（雙大括號）綁定msg變量
2、script標簽腳本部分：
（1）使用ES6的解構(gòu)賦值語法 " const { createApp } = Vue " 從Vue模塊中導入createApp函數(shù)，并將其賦值給一個常量createApp
（2）使用createApp函數(shù)創(chuàng)建一個Vue實例，并且使用 " mount('#app') " 方法將該實例掛載到布局中id為app的DOM元素上
（3）在createApp函數(shù)創(chuàng)建的Vue實例中包含了data選項的對象，data返回了一個包含鍵值對的對象，其鍵為msg，值為"這是CDN引入Vue.js實例"
3、當Vue實例被創(chuàng)建后，它將 data 中的所有屬性加入到Vue的響應式系統(tǒng)中，這些屬性的值被定義或者發(fā)生改變時，視圖層（即布局內(nèi)容）將產(chǎn)生“響應”，自動匹配更新為新的值。

【注】Mustache語法（又稱大胡子語法，由兩對大括號標記）是一套logic-less（輕邏輯）的模板解析引擎。它可以用來處理 HTML 、配置文件、源代碼等任何文件。它把模板中的標簽展開成給定的數(shù)據(jù)映射或者對象中的屬性值?？梢詰迷贘avaScript、PHP、Perl等多種語言中

2、使用本地保存的Vue.js文件

在某些特定的情況下，項目可能要求我們不使用CDN，而是將Vue.js作為項目本地文件直接引用。那么我們就可以將此js文件下載到本地來使用。
具體實現(xiàn)步驟如下：

（1）打開Vue.js文件

使用瀏覽器打開CDN中指向的js文件地址：

https://unpkg.com/vue@3/dist/vue.global.js

圖15-2-6 瀏覽器訪問js文件地址

（2）下載Vue.js文件

使用瀏覽器將文件保存為本地的vue.global.js文件


圖15-2-7 保存本地文件

（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文件成功。

圖15-2-7 引入本地Vue頁面預覽圖

3、使用Vue CLI創(chuàng)建Vue項目

之前的兩種方式適用于頁面較少的項目，可以只引入Vue.js直接使用。但通常情況下，一個完整的前端項目會涉及到組件、路由、狀態(tài)管理等各方面的需求，這時，我們就可以使用Vue CLI來創(chuàng)建一個功能更為豐富的Vue項目。
在創(chuàng)建項目之前，我們需要先安裝項目創(chuàng)建和運行所需的Node.js環(huán)境與Vue CLI。

（1）Node.js簡介

Node.js發(fā)布于2009年5月，由Ryan Dahl開發(fā)，是一個基于Chrome V8引擎的JavaScript運行時環(huán)境，使得JavaScript可以在服務器端運行。它提供了一組用于開發(fā)Web服務器和其他網(wǎng)絡應用的工具和庫，它讓JavaScript成為與PHP、Python、Perl、Ruby等服務端語言平起平坐的腳本語言。

Node.js的主要特點包括：

  • 非阻塞I/O模型：Node.js使用事件驅(qū)動、非阻塞I/O模型，使得程序可以并發(fā)處理大量的請求，而不會因為阻塞I/O操作而導致性能下降。
  • 輕量高效：由于使用了V8引擎，Node.js具有快速的代碼執(zhí)行速度和低內(nèi)存消耗，適合處理高并發(fā)的請求。
  • 單線程：Node.js使用單線程的事件循環(huán)機制，減少了線程切換和上下文切換的開銷，使得并發(fā)性能更高。
  • 跨平臺：Node.js可以在多個操作系統(tǒng)上運行，包括Windows、Mac和Linux等。

（2）npm簡介

Node.js附帶了一個強大的包管理工具npm（Node Package Manager）包管理器，是一個用于安裝、管理和分享JavaScript代碼的工具。通過npm，開發(fā)者可以輕松地安裝和管理第三方模塊、庫和工具，以及發(fā)布自己的包供他人使用。

npm具有以下核心功能和特點：

  • 包管理：npm允許你安裝、升級、刪除和管理項目依賴的模塊和包。你可以在項目根目錄下的 package.json 文件中定義項目依賴，并通過運行 npm install 命令來安裝所有依賴。
  • 包發(fā)布：你可以使用npm將自己開發(fā)的模塊和庫發(fā)布到npm，供其他開發(fā)者使用。通過運行 npm publish 命令，你可以發(fā)布自己的包，并將其在npm上注冊。
  • 版本管理：npm使用語義化版本（Semantic Versioning）來管理模塊和包的版本。每個發(fā)布的包都有一個版本號，你可以指定依賴模塊的版本范圍，以確保兼容性和可靠性。
  • 命令行工具：npm提供了一個命令行界面，用于執(zhí)行各種操作，如安裝、發(fā)布、更新、搜索、測試等。你可以使用 npm install 安裝依賴， npm run 運行自定義腳本， npm search 搜索可用的模塊等。
  • 全局安裝：除了在項目中使用本地安裝的模塊，npm還支持全局安裝模塊，以供系統(tǒng)中的所有項目使用。你可以通過 npm install -g 命令將模塊全局安裝。

無論是在個人項目還是團隊開發(fā)中，npm都是JavaScript開發(fā)中常用的工具之一。它為開發(fā)者提供了便捷的代碼共享和管理機制，有利于構(gòu)建高質(zhì)量的JavaScript應用程序。

（3）Vue CLI簡介

Vue CLI (Vue Command-Line Interface) 是一個官方提供的用于快速搭建和管理Vue項目的命令行工具。它提供了一套交互式的腳手架，可幫助開發(fā)者快速搭建Vue項目的基礎結(jié)構(gòu)，并提供了大量可選的插件和工具，簡化了項目配置和開發(fā)流程。

使用Vue CLI可以獲得以下好處：

  • 快速創(chuàng)建項目：Vue CLI提供了一個交互式的命令行界面，可幫助你快速創(chuàng)建一個基于Vue.js的項目。它會為你生成項目的基本目錄結(jié)構(gòu)和配置文件，并自動安裝所需的依賴。
  • 管理插件和工具：Vue CLI支持使用插件和工具來擴展項目的功能。你可以通過簡單的命令行操作來添加、升級或移除插件，以滿足項目的需求。
  • 配置管理：Vue CLI提供了一個易于使用的配置文件，用于管理項目的構(gòu)建和開發(fā)配置。你可以在配置文件中定制構(gòu)建過程、配置開發(fā)服務器、添加Babel、ESLint、TypeScript等支持。
  • 內(nèi)置指令：Vue CLI提供了方便的指令來運行開發(fā)服務器、構(gòu)建生產(chǎn)版本、運行測試等常用任務。它們都經(jīng)過優(yōu)化和自動化的配置，可使你更專注于開發(fā)而不是繁瑣的配置過程。

要使用Vue CLI，我們首先需要安裝Node.js和npm，然后使用npm安裝Vue CLI。安裝完成后，我們就可以通過運行 vue create 命令來創(chuàng)建我們的Vue項目。

4、安裝Node.js環(huán)境

在Node.js官網(wǎng)（https://nodejs.org/）下載對應版本的安裝包：

Node.js官網(wǎng)

下載完成后，雙擊安裝包進行安裝：


啟動安裝界面
勾選同意許可證協(xié)議
選擇安裝路徑
設置安裝選項
本機模塊工具
準備開始安裝
安裝完成

（5）確認安裝結(jié)果

打開Windows命令行工具，輸入查看node版本的命令并執(zhí)行：

node -v
查看node版本

輸入查看npm版本的命令并執(zhí)行：

npm -v
查看npm版本

5、安裝Vue CLI

在成功安裝了Node.js 與npm工具后，就可以使用npm命令安裝Vue CLI：

npm install -g @vue/cli

npm的默認配置是使用官方的包存儲服務器，官方服務器位于全球各地，并且通常在國外。可能會出現(xiàn)訪問速度較慢的情況。為了解決這個問題，國內(nèi)的一些廠商提供了npm的鏡像服務器，例如淘寶的npm鏡像（cnpm）。這些鏡像服務器基本上是將npm服務器的內(nèi)容復制到國內(nèi)的服務器上，并提供更快的訪問速度。通過將npm的下載源切換到國內(nèi)鏡像，可以顯著加快包的下載速度。
另一方面，盡管cnpm在國內(nèi)使用具有優(yōu)勢，但由于淘寶鏡像數(shù)據(jù)同步和穩(wěn)定性的原因，有時可能會導致一些包的版本不一致或者不完全可用。因此，在實際開發(fā)中，如果我們遇到任何問題或沖突，建議切換回使用npm或采取適當?shù)慕鉀Q方法。

以下為使用國內(nèi)鏡像的安裝方式：

首先，使用npm安裝國內(nèi)鏡像cnpm：

npm install -g cnpm --registry=https://registry.npm.taobao.org
安裝npm國內(nèi)鏡像

其次，將npm下載源切換為cnpm的源：

npm config set registry https://registry.npm.taobao.org
切換為cnpm的源

然后，我們就可以使用cnpm命令，使用國內(nèi)鏡像來安裝Vue CLI了：

cnpm install -g @vue/cli
安裝Vue CLI

安裝成功后，輸入查看Vue CLI 版本的命令并執(zhí)行：

vue/cli -V
查看Vue CLI 版本

6、創(chuàng)建Vue項目

在完成環(huán)境和工具的安裝之后，我們現(xiàn)在可以開始創(chuàng)建我們自己的Vue項目了！

（1）執(zhí)行創(chuàng)建項目命令

輸入創(chuàng)建項目命令，創(chuàng)建一個名為 my_test_vue 的項目：

vue create my_test_vue

（2）選擇項目預設選項

在選擇項目預設頁面中，我們可以根據(jù)自己的需要逐步設置：

選擇項目預設

使用鍵盤的上下鍵切換選項，上圖中的選項分別為：

  • 前面幾行選項（myDemo, myTest, 0530mmm等）為之前保存的自定義配置選項，可直接選擇使用
  • Defalue([Vue 3] babel, eslint)：為系統(tǒng)預設的Vue3基礎配置選項
  • Defalue([Vue 2] babel, eslint)：為系統(tǒng)預設的Vue2基礎配置選項
  • Manually select features：為手動選擇配置

我們選擇“Defalue([Vue 3] babel, eslint)”，按回車鍵確認，創(chuàng)建一個系統(tǒng)預設的Vue3基礎配置項目：

創(chuàng)建項目完成

（3）啟動項目

進入新創(chuàng)建的項目目錄：

cd my_test_vue
進入項目目錄

使用npm命令啟動項目：

項目啟動成功界面

使用瀏覽器訪問項目：
根據(jù)項目啟動成功界面中的提示，我們可以使用瀏覽器訪問創(chuàng)建的my_test_vue項目，以下兩種訪問方式均可：

  • 本地訪問方式：訪問 http://localhost:8080/ 地址
  • 網(wǎng)絡訪問方式：訪問 http://192.168.3.93:8080/ 地址
Vue項目首頁

（4）注意事項

（1）Windows命令行工具默認在C盤用戶目錄下執(zhí)行，所以項目也將自動創(chuàng)建在該目錄下。實際開發(fā)中，需要選擇在合適的目錄下執(zhí)行創(chuàng)建項目命令。
（2）我們創(chuàng)建的項目名稱不能有大寫字母，否則會報錯如下：


項目名稱中不能有大寫字母
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容