原文鏈接

1 Web 概述

Web 三要素：HTML，CSS，JavaScript。

HTML 用于控制網頁的結構，CSS 用于控制網頁的外觀，JavaScript 控制的是網頁的行為。

1.1 HTML

HTML 是超文本標記語言（Hyper Text Markup Language），一種純文本類型的語言，用來設計網頁的標記語言，用該語言編寫的文件以 .html 或者 .htm 為后綴，由瀏覽器解釋執行，在 HTML 的頁面上可以嵌套腳本語言編寫程序段，如 JavaScript。

HTML 工作原理：HTML 是部署在服務器上的文本文件，根據 HTTP 協議瀏覽器發出請求給服務器，服務器做出響應給瀏覽器返回一個 HTML，瀏覽器解釋執行 HTML，從而顯示內容。

1.2 CSS

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

1.3 JavaScript

javaScript 是嵌入在 HTML 中在瀏覽器中的腳本語言，具有與 java 和 C 語言類似的語言，一種網頁的編程技術，用來向 HTML 頁面添加交互行為，直接嵌入 HTML 頁面，由瀏覽器解釋執行代碼，不進行預編譯。

2 新項目啟動

安裝依賴包：

npm install

若有部分包安裝失敗：

npm audit fix --force

啟動：

npm run serve

打包：

npm run build

3 Vue 的安裝

3.1 安裝 Node.js

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

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

選擇對應版本進行下載，Windows 就選 Windows Installer (.msi) 。 雙擊下載后的 .msi 安裝包，按照默認配置一步一步執行即可。

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

path

在輸出中的眾多路徑中， 看到環境變量中已經包含了安裝 node.js 的路徑：

D:\\NodeJS\\

檢查 Node.js 版本：

node --version

輸出版本號：

v16.15.1

即表示安裝成功。

3.2 安裝 Vue.js

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

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

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

然后使用 cnpm 命令來安裝 vue：

cnpm install vue

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

vue --version

輸出版本號：

2.9.6

即表示安裝成功。

4 單頁實例

4.1 安裝環境

首先全局安裝 vue-cli：

cnpm install --global vue-cli

使用 cd 命令切換到一個新目錄，用于存放 web 項目（嫌麻煩可以跳過這一步，用默認目錄）：

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

創建一個基于 webpack 模板的新項目，項目名為 my-vue：

vue init webpack my-vue

進行默認配置：

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

默認進行回車：

? 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

進入新創建的 my-vue 文件：

cd my-vue

4.2 啟動項目

執行 install 和 run 命令：

cnpm install
cnpm run dev

看到輸出：

DONE Compiled successfully in 5292ms

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

表示成功執行，打開瀏覽器，訪問 http://localhost:8080/，可以看到前端輸出結果：

打包 Vue 項目：

npm run build

執行完成后，會在 vue 項目下生成一個 dist 目錄。dist 目錄包含 static 目錄和 index.html 文件，static 目錄包含了靜態文件 js、css 和圖片目錄 images。

4.3 目錄結構

node_modules 文件夾下是項目依賴包，也就是 cnpm install 命令下載下來的依賴。

src 文件夾下即代碼主體。

學習更多編程知識，請關注我的公眾號：

代碼的路