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

我們提供的服務(wù)有:成都網(wǎng)站設(shè)計、成都做網(wǎng)站、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、汝南ssl等。為數(shù)千家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù),是有科學(xué)管理、有技術(shù)的汝南網(wǎng)站制作公司
將 Vue.js 添加到項目中有三種主要方式。
- 在頁面上以 CDN package 的形式導(dǎo)入。
- 使用 npm 安裝它。
- 使用官方的 CLI 來構(gòu)建一個項目,它為現(xiàn)代前端工作流程提供了功能齊備的構(gòu)建設(shè)置 (例如,熱重載、保存時的提示等等)。
#發(fā)布版本說明
最新版本:
每個版本的詳細發(fā)行說明可在 GitHub 上找到。
#Vue Devtools
當(dāng)前是 Beta 版——Vuex 和 Router 的集成仍然是 WIP
在使用 Vue 時,我們推薦在你的瀏覽器上安裝 Vue Devtools,它允許你在一個更友好的界面中審查和調(diào)試 Vue 應(yīng)用。
#CDN
對于制作原型或?qū)W習(xí),你可以這樣使用最新版本
對于生產(chǎn)環(huán)境,我們推薦鏈接到一個明確的版本號和構(gòu)建文件,以避免新版本造成的不可預(yù)期的破壞:
#npm
在用 Vue 構(gòu)建大型應(yīng)用時推薦使用 npm 安裝 。NPM 能很好地和諸如 Webpack 或 Browserify 模塊打包器配合使用。同時 Vue 也提供配套工具來開發(fā)單文件組件。
## 最新穩(wěn)定版
$ npm install vue@next
#命令行工具 (CLI)
Vue 提供了一個官方的 CLI,為單頁面應(yīng)用 (SPA) 快速搭建繁雜的腳手架。它為現(xiàn)代前端工作流提供了 batteries-included 的構(gòu)建設(shè)置。只需要幾分鐘的時間就可以運行起來并帶有熱重載、保存時 lint 校驗,以及生產(chǎn)環(huán)境可用的構(gòu)建版本。更多詳情可查閱 Vue CLI 的文檔。
TIP
CLI 工具假定用戶對 Node.js 和相關(guān)構(gòu)建工具有一定程度的了解。如果你是新手,我們強烈建議先在不用構(gòu)建工具的情況下通讀指南,在熟悉 Vue 本身之后再使用 CLI。
對于 Vue 3,你應(yīng)該使用 npm 上可用的 Vue CLI v4.5 作為 @vue/cli@next。要升級,你應(yīng)該需要全局重新安裝最新版本的 @vue/cli:
yarn global add @vue/cli@next
## OR
npm install -g @vue/cli@next然后在 Vue 項目運行:
vue upgrade --next
#Vite
Vite 是一個 web 開發(fā)構(gòu)建工具,由于其原生 ES 模塊導(dǎo)入方法,它允許快速提供代碼。
通過在終端中運行以下命令,可以使用 Vite 快速構(gòu)建 Vue 項目。
使用 npm:
$ npm init vite-app
$ cd
$ npm install
$ npm run dev 或者 yarn:
$ yarn create vite-app
$ cd
$ yarn
$ yarn dev
#對不同構(gòu)建版本的解釋
在 npm 包的 dist/ 目錄你將會找到很多不同的 Vue.js 構(gòu)建版本。這里列出了它們之間的差別:
#使用 CDN 或沒有構(gòu)建工具
#vue(.runtime).global(.prod).js:
- 若要通過瀏覽器中的
直接使用,則暴露 Vue 全局; - 瀏覽器內(nèi)模板編譯:
vue.global.js是包含編譯器和運行時的“完整”構(gòu)建,因此它支持動態(tài)編譯模板。vue.runtime.global.js只包含運行時,并且需要在構(gòu)建步驟期間預(yù)編譯模板。
- 內(nèi)聯(lián)所有 Vue 核心內(nèi)部包——即:它是一個單獨的文件,不依賴于其他文件,這意味著你必須導(dǎo)入此文件和此文件中的所有內(nèi)容,以確保獲得相同的代碼實例。
- 包含硬編碼的 prod/dev 分支,并且 prod 構(gòu)建是預(yù)先縮小的。使用
*.prod.js用于生產(chǎn)的文件。
提示
全局打包不是 UMD 構(gòu)建的,它們被打包成 IIFEs,并且僅用于通過 直接使用。
#vue(.runtime).esm-browser(.prod).js:
- 用于通過原生 ES 模塊導(dǎo)入使用 (在瀏覽器中通過
; - 與全局構(gòu)建共享相同的運行時編譯、依賴內(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)入的依賴項也是 esm bundler 構(gòu)建,并將依次導(dǎo)入其依賴項 (例如:@vue/runtime-core imports @vue/reactivity)
- 這意味著你可以單獨安裝/導(dǎo)入這些依賴,而不會導(dǎo)致這些依賴項的不同實例,但你必須確保它們都為同一版本。
- 瀏覽器內(nèi)模板編譯:
vue.runtime.esm-bundler.js(默認(rèn)) 僅運行時,并要求所有模板都要預(yù)先編譯。這是打包工具的默認(rèn)入口 (通過package.json中的 module 字段),因為在使用 bundler 時,模板通常是預(yù)先編譯的 (例如:在*.vue文件中),你需要將打包工具配置 vue 別名到這個文件
#對于服務(wù)端渲染
-
vue.cjs(.prod).js
:
- 或用于 Node.js 通過
require()進行服務(wù)器端渲染。 - 如果你將應(yīng)用程序與帶有
target: 'node'的 webpack 打包在一起,并正確地將vue外部化,則將加載此構(gòu)建。 - dev/prod 文件是預(yù)構(gòu)建的,但是根據(jù)
process.env.NODE_env會自動需要相應(yīng)的文件。
#運行時 + 編譯器 vs. 僅運行時
如果需要在客戶端上編譯模板 (即:將字符串傳遞給 template 選項,或使用其在 DOM 中 HTML 作為模板掛載到元素),你需要編譯器,因此需要完整的版本:
// 需要編譯器
Vue.createApp({
template: '{{ hi }}'
})
// 不需要
Vue.createApp({
render() {
return Vue.h('div', {}, this.hi)
}
}) 當(dāng)使用 vue-loader 時,*.vue 文件中的模板在生成時預(yù)編譯為 JavaScript,在最終的打包器中并不需要編譯器,因此可以只使用運行時構(gòu)建。
文章名稱:創(chuàng)新互聯(lián)VUE3教程:Vue3.0安裝
當(dāng)前URL:http://fisionsoft.com.cn/article/dpcegdh.html


咨詢
建站咨詢
