對於開發和學習任何一門新技術，新框架，最主要的還是能夠運行起來，怎麼運行起來，這才是最主要的。所以，我們來說一下 Vue.js 的安裝方式。

因為 Vue.js 的設計初始，就是一個漸進式的 JavaScript 框架，所以你可以按需所用，這也就造就了他可以使用多種方式集成到一個項目中。

當前文檔的最新版本為: 3.2.12 to 3.2.13

這裡盡量在文檔中使用的都是該版本，沒有大版本變化，不再對內容進行更新。本來使用 3.2.12 編寫本次文章，但在本文章編寫的過程中，已經升級到 3.2.13，本次教程也同步升級到 3.2.13

在應用使用 Vue.js 中一般有4種方式（也可以說是三種方式，也可以說是五種方式）：

在頁面上使用 CDN 包的形式導入
下載 Vue.js 的 JavaScript 文件引用使用
使用 npm 安裝它
使用官方的 CLI 來構建應用，這個是現在前端工作流程中使用最多的方式。

接下來詳細的講解這幾種方式。

使用 Vite 構建工具，進行構建應用

1. 在頁面上使用 CDN 包的形式導入

在一開始 WEB 開發的過程中，我們總是需要在 html 頁面中直接引入對應的 JavaScript 文件。 Vue.js 是一個漸進式的框架，所以這種方式也可以使用：

<script src="https://unpkg.com/vue@next"></script>

引入的代碼如下所示，為了界面效果代碼進行了截圖。所有的代碼都會放到 github 中。

執行該文件可以看到這種方式我們引用了vue@next, vue@3.2.12, vue.global.js這三個文件。

效果圖如下：

在實際的生產環境下，最好指定對應的具體版本信息，這樣可以避免一些版本升級遇到的問題和bug。

指定版本的方式為：

<script src="https://unpkg.com/vue@3.2.12/dist/vue.global.js"></script>

對於指定版本的引入只會引入該文件自己。後續需要用到的文件將需要自己單獨引用。所以對於這種方式使用全局的引用方式進行引入。

2.下載 Vue.js 的 JavaScript 文件引用使用

第二種方法和第一種其實是一種方式，一個是別人幫我們搭建好了，我們直接用，另外一個是我們下載需要的引用文件進行本地引用。在使用的方式上是一致的。

下載地址有兩個：

https://cdn.jsdelivr.net/npm/vue@next/dist/

https://unpkg.com/browse/vue@3.2.12/dist/

我會把這個文件下載備份到 github 中，可以查看最後的 github 地址，進行查閱。也可以繼續翻閱該教程，到第三步的時候，使用npm 直接安裝文件，到時候 npm 構建工具會直接下載所有需要的文件到本地。

Vue.js 目錄結構，如圖：

針對以上的文件這麼多，我們應該怎麼選擇其中的 JavaScript 文件進行引用呢？我們分為幾種不同的情況進行說明。

*prod.js 和 *.js 帶有 prod 為生產環境的版本，進行了代碼壓縮。不帶的就是開發版本，針對開發會有詳細的提示信息。

使用 CDN 或沒有構建工具

vue(.runtime).global(.prod).js

若要通過瀏覽器中的 <script src=”…”> 直接使用，使用過程中就需要暴露 Vue 全局。
瀏覽器內模板編譯：
vue.global.js 是包含編譯器和運行時的“完整”構建版本，因此它支持動態編譯模板。
vue.runtime.global.js 只包含運行時，並且需要在構建步驟期間預編譯模板。
內聯所有 Vue 核心內部包——即：它是一個單獨的文件，不依賴於其他文件。這意味着你必須導入此文件和此文件中的所有內容，以確保獲得相同的代碼實例。
包含硬編碼的 prod/dev 分支，並且 prod 構建版本是預先壓縮過的。將 *.prod.js 文件用於生產環境。

如果不使用 UMD(Universal Module Definition) 模塊化規範構建項目，使用 IIFEs(Immediately-Invoked Function Expressions) 立即執行函數（自執行匿名函數）構建則可以直接引用JavaScript文件即可。

vue(.runtime).esm-browser(.prod).js

用於通過原生 ES 模塊導入使用 (在瀏覽器中通過 <script type=”module”> 來使用)。
與全局構建版本共享相同的運行時編譯、依賴內聯和硬編碼的 prod/dev 行為。

使用構建工具

vue(.runtime).esm-bundler.js

用於 webpack，rollup 和 parcel 等構建工具。
留下 prod/dev 分支的 process.env.NODE_ENV 守衛語句 (必須由構建工具替換)。
不提供壓縮版本 (打包後與其餘代碼一起壓縮)。
import 依賴 (例如：@vue/runtime-core，@vue/runtime-compiler)
導入的依賴項也是 esm bundler 構建版本，並將依次導入其依賴項 (例如：@vue/runtime-core imports @vue/reactivity)。
這意味着你可以單獨安裝/導入這些依賴，而不會導致這些依賴項的不同實例，但你必須確保它們都為同一版本。
瀏覽器內模板編譯：
vue.runtime.esm-bundler.js (默認) 僅運行時，並要求所有模板都要預先編譯。這是構建工具的默認入口 (通過 package.json 中的 module 字段)，因為在使用構建工具時，模板通常是預先編譯的 (例如：在 *.vue 文件中)。
vue.esm-bundler.js 包含運行時編譯器。如果你使用了一個構建工具，但仍然想要運行時的模板編譯 (例如，DOM 內模板或通過內聯 JavaScript 字符串的模板)，請使用這個文件。你需要配置你的構建工具，將 vue 設置為這個文件。

使用服務端渲染方式

vue.cjs(.prod).js

通過 require() 在 Node.js 服務器端渲染使用。
如果你將應用程序與帶有 target: ‘node’ 的 webpack 打包在一起，並正確地將 vue 外部化，則將加載此文件。
dev/prod 文件是預構建的，但是會根據 process.env.NODE_ENV 自動加載相應的文件。

簡單的來自官網的介紹，具體的詳細細節會在接下來的使用過，共同體會和發現區別。我們繼續。

本地引用的方式直接修改引用地址即可：

<script src="https://unpkg.com/vue@3.2.12/dist/vue.global.js"></script>

在頁面上新建了一個目錄vuejs. 然後引用地址之後為：

<script src="vuejs/vue.global.js"></script>

因為這裡下載的就是固定的版本，就不需要進行版本的指定了。

代碼截圖為：

效果圖如下：

3. 使用 npm 構建安裝的方式

首先你需要先安裝 Node.js, 並且可以使用 npm 指令。當然也可以使用 yarn。並且使用 Vue.js 構建大型應用時推薦使用 npm 安裝的方式。需要注意的是，國內使用 npm 會特別的慢，可以使用國內源進行加速，或者自己搭建 npm 的私服。

使用 node –version 和 npm –version 查看是否安裝並且保證較新的版本。

然後可以使用 npm install 命令進行安裝使用。

npm install vue@next

–save 是當前項目生效，不加的話默認為全局生效。

從這裡可以看到 npm 構建工具已經把我們需要的所有的相關的依賴都下載到了當前目錄中。

Vue 還提供了編寫單文件組件的配套工具。如果你想使用單文件組件，那麼你還需要安裝 @vue/compiler-sfc：

npm install -D @vue/compiler-sfc

除了 @vue/compiler-sfc 之外，你還需要為已選擇的打包工具選擇一個配套的單文件組件 loader 或 plugin。

大多數情況下，我們更傾向於使用基於 webpack 的 Vue CLI 構建工具來創建一個最小化的Vue.js應用。

4. 使用 CLI 工具構建應用

CLI: command-line interface 命令行界面，一般情況下是通過應用的內部接口, 來實現一些不需要操作界面也能完成的工作。

對於 Vue3 這裡使用 Vue-CLI 最新版本的 Vue CLI v4.5, 而且命令改為： @vue/cli 最新版本安裝方式為：

yarn global add @vue/cli
npm install -g @vue/cli

npm 方式

yarn 方式：

如果在當前項目中需要升級到最新版本，可以使用命令 vue upgrade –next 進行升級，大版本不推薦這種方式進行升級。如果需要遷移大版本，推薦參考遷移指南。

接下來就可以使用 Vue/CLI 進行構建應用了。

創建一個 hello world 應用

vue create hello-world

默認是 Vue2 的版本，可以切換到 Vue3 的版本。然後點擊回車。

進入到 hello-world 的工作目錄中

cd hello-world

並用 npm run 啟動項目

npm run serve

打開瀏覽器使用 http://localhost:8080 進行訪問，查看效果：

5. 使用 Vite 構建 Vue 應用

Vite 是一個 web 開發構建工具，由於其原生 ES 模塊導入方式，可以實現閃電般的冷服務器啟動。以及快速的進行熱部署。

在終端命令中輸入一下命令，就可以使用 Vite 構建 Vue 項目。

使用 npm init 創建應用

npm 6.x 和 7.x 有不同之處。

npm 6.x

npm init vite@latest <project-name> --template vue

npm 7+，需要加上額外的雙短橫線

npm init vite@latest <project-name> -- --template vue

然後進入到 project 目錄中，特別尷尬，大佬竟然在凌晨3點提交了 Vue.js 的 3.2.13 版本，導致 npm install 一直提示找不到對應的信息。不怕技術牛逼的人，就怕技術牛逼的人還在拼。找不到的原因是因為私服的存在，有一定的延遲性，沒有辦法及時的更新npm 依賴。解決辦法是暫時的把私服或者加速關閉，使用官方源進行 install 就可以了。

cd <project-name> 
npm install
npm run dev

打開瀏覽器查看效果：

使用 yarn 創建項目

yarn create vite <project-name> --template vue

cd <project-name>
yarn
yarn dev

瀏覽器效果同上，不在截圖。

使用 pnpm 創建項目

pnpm dlx create-vite <project-name> --template vue

cd <project-name>
pnpm install
pnpm run dev

瀏覽器查看效果和第一個效果一致，不再截圖。

pnpm

pnpm 是一個新的構建方式，類似於 maven，把所有的依賴文件相對單獨存放，這樣的好處是，當你的依賴重複的時候，不會在各自的應用中重複出現，節省磁盤的空間和安裝速度。使用 npm install -g pnpm 安裝使用。具體可以查看
https://www.pnpm.cn/installation 。

多種使用方式已經描述完畢，很多細節的知識點，需要後續實際使用的過程中進行詳細描述。

原創文章，作者：投稿專員，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/229801.html