Vue 3.0 安裝

Vue.js 設(shè)計(jì)的初衷就包括可以被漸進(jìn)式地采用。這意味著它可以根據(jù)需求以多種方式集成到一個(gè)項(xiàng)目中。

將 Vue.js 添加到項(xiàng)目中有三種主要方式。

1. 在頁面上以 CDN package 的形式導(dǎo)入。
2. 使用 npm 安裝它。
3. 使用官方的 CLI 來構(gòu)建一個(gè)項(xiàng)目，它為現(xiàn)代前端工作流程提供了功能齊備的構(gòu)建設(shè)置 (例如，熱重載、保存時(shí)的提示等等)。

#發(fā)布版本說明

最新版本：

每個(gè)版本的詳細(xì)發(fā)行說明可在 GitHub 上找到。

#Vue Devtools

當(dāng)前是 Beta 版——Vuex 和 Router 的集成仍然是 WIP

在使用 Vue 時(shí)，我們推薦在你的瀏覽器上安裝 Vue Devtools，它允許你在一個(gè)更友好的界面中審查和調(diào)試 Vue 應(yīng)用。

#CDN

對(duì)于制作原型或?qū)W習(xí)，你可以這樣使用最新版本

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

對(duì)于生產(chǎn)環(huán)境，我們推薦鏈接到一個(gè)明確的版本號(hào)和構(gòu)建文件，以避免新版本造成的不可預(yù)期的破壞：

#npm

在用 Vue 構(gòu)建大型應(yīng)用時(shí)推薦使用 npm 安裝 。NPM 能很好地和諸如 Webpack 或 Browserify 模塊打包器配合使用。同時(shí) Vue 也提供配套工具來開發(fā)單文件組件。

## 最新穩(wěn)定版
$ npm install vue@next

#命令行工具 (CLI)

Vue 提供了一個(gè)官方的 CLI，為單頁面應(yīng)用 (SPA) 快速搭建繁雜的腳手架。它為現(xiàn)代前端工作流提供了 batteries-included 的構(gòu)建設(shè)置。只需要幾分鐘的時(shí)間就可以運(yùn)行起來并帶有熱重載、保存時(shí) lint 校驗(yàn)，以及生產(chǎn)環(huán)境可用的構(gòu)建版本。更多詳情可查閱 Vue CLI 的文檔。

TIP

CLI 工具假定用戶對(duì) Node.js 和相關(guān)構(gòu)建工具有一定程度的了解。如果你是新手，我們強(qiáng)烈建議先在不用構(gòu)建工具的情況下通讀指南，在熟悉 Vue 本身之后再使用 CLI。

對(duì)于 Vue 3，你應(yīng)該使用 npm 上可用的 Vue CLI v4.5 作為 @vue/cli@next。要升級(jí)，你應(yīng)該需要全局重新安裝最新版本的 @vue/cli：

yarn global add @vue/cli@next
## OR
npm install -g @vue/cli@next

然后在 Vue 項(xiàng)目運(yùn)行：

vue upgrade --next

#Vite

Vite 是一個(gè) web 開發(fā)構(gòu)建工具，由于其原生 ES 模塊導(dǎo)入方法，它允許快速提供代碼。

通過在終端中運(yùn)行以下命令，可以使用 Vite 快速構(gòu)建 Vue 項(xiàng)目。

使用 npm：

$ npm init vite-app <project-name>
$ cd <project-name>
$ npm install
$ npm run dev

或者 yarn：

$ yarn create vite-app <project-name>
$ cd <project-name>
$ yarn
$ yarn dev

#對(duì)不同構(gòu)建版本的解釋

在 npm 包的 dist/ 目錄你將會(huì)找到很多不同的 Vue.js 構(gòu)建版本。這里列出了它們之間的差別：

#使用 CDN 或沒有構(gòu)建工具

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

• 若要通過瀏覽器中的 <script src="..."> 直接使用，則暴露 Vue 全局；
• 瀏覽器內(nèi)模板編譯：
  • vue.global.js 是包含編譯器和運(yùn)行時(shí)的“完整”構(gòu)建，因此它支持動(dòng)態(tài)編譯模板。
  • vue.runtime.global.js 只包含運(yùn)行時(shí)，并且需要在構(gòu)建步驟期間預(yù)編譯模板。
• 內(nèi)聯(lián)所有 Vue 核心內(nèi)部包——即：它是一個(gè)單獨(dú)的文件，不依賴于其他文件，這意味著你必須導(dǎo)入此文件和此文件中的所有內(nèi)容，以確保獲得相同的代碼實(shí)例。
• 包含硬編碼的 prod/dev 分支，并且 prod 構(gòu)建是預(yù)先縮小的。使用 *.prod.js 用于生產(chǎn)的文件。

提示

全局打包不是 UMD 構(gòu)建的，它們被打包成 IIFEs，并且僅用于通過 <script src="..."> 直接使用。

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

• 用于通過原生 ES 模塊導(dǎo)入使用 (在瀏覽器中通過 <script type="module">；
• 與全局構(gòu)建共享相同的運(yùn)行時(shí)編譯、依賴內(nèi)聯(lián)和硬編碼的 prod/dev 行為。

#使用構(gòu)建工具

#vue(.runtime).esm-bundler.js：

• 使用構(gòu)建工具像 webpack，rollup 和 parcel。

• TODO：將 prod/dev 分支留給 process.env.NODE_ENV guards (需要更換構(gòu)建工具)

• 不提供最小化版本 (捆綁后與其余代碼一起完成)

• import 依賴 (例如：

@vue/runtime-core，@vue/runtime-compiler)

• 導(dǎo)入的依賴項(xiàng)也是 esm bundler 構(gòu)建，并將依次導(dǎo)入其依賴項(xiàng) (例如：@vue/runtime-core imports @vue/reactivity)
• 這意味著你可以單獨(dú)安裝/導(dǎo)入這些依賴，而不會(huì)導(dǎo)致這些依賴項(xiàng)的不同實(shí)例，但你必須確保它們都為同一版本。

• 瀏覽器內(nèi)模板編譯：

• vue.runtime.esm-bundler.js (默認(rèn)) 僅運(yùn)行時(shí)，并要求所有模板都要預(yù)先編譯。這是打包工具的默認(rèn)入口 (通過 package.json 中的 module 字段)，因?yàn)樵谑褂?bundler 時(shí)，模板通常是預(yù)先編譯的 (例如：在 *.vue 文件中)，你需要將打包工具配置 vue 別名到這個(gè)文件

#對(duì)于服務(wù)端渲染

• vue.cjs(.prod).js

：

• 或用于 Node.js 通過 require() 進(jìn)行服務(wù)器端渲染。
• 如果你將應(yīng)用程序與帶有 target: 'node' 的 webpack 打包在一起，并正確地將 vue 外部化，則將加載此構(gòu)建。
• dev/prod 文件是預(yù)構(gòu)建的，但是根據(jù) process.env.NODE_env 會(huì)自動(dòng)需要相應(yīng)的文件。

#運(yùn)行時(shí) + 編譯器 vs. 僅運(yùn)行時(shí)

如果需要在客戶端上編譯模板 (即：將字符串傳遞給 template 選項(xiàng)，或使用其在 DOM 中 HTML 作為模板掛載到元素)，你需要編譯器，因此需要完整的版本：

//  需要編譯器
Vue.createApp({
  template: '<div>{{ hi }}</div>'
})


// 不需要
Vue.createApp({
  render() {
    return Vue.h('div', {}, this.hi)
  }
})

當(dāng)使用 vue-loader 時(shí)，*.vue 文件中的模板在生成時(shí)預(yù)編譯為 JavaScript，在最終的打包器中并不需要編譯器，因此可以只使用運(yùn)行時(shí)構(gòu)建。