原文鏈接

1 Web 概述

Web 三要素：HTML，CSS，JavaScript。

HTML 用于控制網(wǎng)頁(yè)的結(jié)構(gòu)，CSS 用于控制網(wǎng)頁(yè)的外觀，JavaScript 控制的是網(wǎng)頁(yè)的行為。

1.1 HTML

HTML 是超文本標(biāo)記語(yǔ)言（Hyper Text Markup Language），一種純文本類型的語(yǔ)言，用來(lái)設(shè)計(jì)網(wǎng)頁(yè)的標(biāo)記語(yǔ)言，用該語(yǔ)言編寫的文件以 .html 或者 .htm 為后綴，由瀏覽器解釋執(zhí)行，在 HTML 的頁(yè)面上可以嵌套腳本語(yǔ)言編寫程序段，如 JavaScript。

HTML 工作原理：HTML 是部署在服務(wù)器上的文本文件，根據(jù) HTTP 協(xié)議瀏覽器發(fā)出請(qǐng)求給服務(wù)器，服務(wù)器做出響應(yīng)給瀏覽器返回一個(gè) HTML，瀏覽器解釋執(zhí)行 HTML，從而顯示內(nèi)容。

1.2 CSS

CSS 是層疊樣式表（Cascading Style Sheets），樣式定義了如何顯示 HTML 元素，樣式通常儲(chǔ)存在樣式表中，CSS 是HTML的化妝師。

1.3 JavaScript

javaScript 是嵌入在 HTML 中在瀏覽器中的腳本語(yǔ)言，具有與 java 和 C 語(yǔ)言類似的語(yǔ)言，一種網(wǎng)頁(yè)的編程技術(shù)，用來(lái)向 HTML 頁(yè)面添加交互行為，直接嵌入 HTML 頁(yè)面，由瀏覽器解釋執(zhí)行代碼，不進(jìn)行預(yù)編譯。

2 新項(xiàng)目啟動(dòng)

安裝依賴包：

npm install

若有部分包安裝失敗：

npm audit fix --force

啟動(dòng)：

npm run serve

打包：

npm run build

3 Vue 的安裝

3.1 安裝 Node.js

安裝 vue 之前，需要先安裝 Node.js。

Node.js 下載地址為：https://nodejs.org/en/download/

選擇對(duì)應(yīng)版本進(jìn)行下載，Windows 就選 Windows Installer (.msi) 。 雙擊下載后的 .msi 安裝包，按照默認(rèn)配置一步一步執(zhí)行即可。

安裝完成后，打開命令提示符，輸入 path：

path

在輸出中的眾多路徑中， 看到環(huán)境變量中已經(jīng)包含了安裝 node.js 的路徑：

D:\\NodeJS\\

檢查 Node.js 版本：

node --version

輸出版本號(hào)：

v16.15.1

即表示安裝成功。

3.2 安裝 Vue.js

Node.js 安裝成功后，可以安裝 Vue.js 了。

國(guó)內(nèi)直接使用 npm 的官方鏡像是非常慢的，通常使用淘寶 NPM 鏡像。 首先切換安裝鏡像：

npm install -g cnpm --registry=https://registry.npmmirror.com

然后使用 cnpm 命令來(lái)安裝 vue：

cnpm install vue

安裝完成后，檢查 vue 版本，輸入：

vue --version

輸出版本號(hào)：

2.9.6

即表示安裝成功。

4 單頁(yè)實(shí)例

4.1 安裝環(huán)境

首先全局安裝 vue-cli：

cnpm install --global vue-cli

使用 cd 命令切換到一個(gè)新目錄，用于存放 web 項(xiàng)目（嫌麻煩可以跳過(guò)這一步，用默認(rèn)目錄）：

# 從C盤切換到D盤
C:\\Users\\zblz2>d:
# 進(jìn)入 vue 目錄
D:\\>cd Vue

創(chuàng)建一個(gè)基于 webpack 模板的新項(xiàng)目，項(xiàng)目名為 my-vue：

vue init webpack my-vue

進(jìn)行默認(rèn)配置：

This will install Vue 2.x version of the template.

默認(rèn)進(jìn)行回車：

? Project name my-project

? Project description A Vue.js project

? Author runoob

? Vue build standalone

? Use ESLint to lint your code? Yes

? Pick an ESLint preset Standard

? Setup unit tests with Karma + Mocha? Yes

? Setup e2e tests with Nightwatch? Yes

vue-cli · Generated "my-project".

To get started:

? cd my-project

? npm install

? npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

進(jìn)入新創(chuàng)建的 my-vue 文件：

cd my-vue

4.2 啟動(dòng)項(xiàng)目

執(zhí)行 install 和 run 命令：

cnpm install
cnpm run dev

看到輸出：

DONE Compiled successfully in 5292ms

I Your application is running here: http://localhost:8080

表示成功執(zhí)行，打開瀏覽器，訪問(wèn) http://localhost:8080/，可以看到前端輸出結(jié)果：

打包 Vue 項(xiàng)目：

npm run build

執(zhí)行完成后，會(huì)在 vue 項(xiàng)目下生成一個(gè) dist 目錄。dist 目錄包含 static 目錄和 index.html 文件，static 目錄包含了靜態(tài)文件 js、css 和圖片目錄 images。

4.3 目錄結(jié)構(gòu)

node_modules 文件夾下是項(xiàng)目依賴包，也就是 cnpm install 命令下載下來(lái)的依賴。

src 文件夾下即代碼主體。

學(xué)習(xí)更多編程知識(shí)，請(qǐng)關(guān)注我的公眾號(hào)：

代碼的路