cq9电子下载

書名： Vue.js企業(yè)開發(fā)實(shí)戰(zhàn)
作者名：千鋒教育高教產(chǎn)品研發(fā)部編著
本章字?jǐn)?shù)： 740字
更新時(shí)間： 2022-07-28 19:42:40

1.2　Vue的安裝與使用

本節(jié)我們來學(xué)習(xí)一下如何安裝及使用Vue框架。

1.2.1　直接使用<script>引入

直接使用Vue有兩種方式，一種是使用獨(dú)立的版本；另一種是使用CDN的方式。本書在第1~3章使用Vue的獨(dú)立版本進(jìn)行講解，對于Vue的初學(xué)者也推薦使用這種方式入門。從第4章開始，使用Vue的腳手架創(chuàng)建項(xiàng)目。

1．使用獨(dú)立的版本

在Vue官網(wǎng)http：//cn.vuejs.org下載最新穩(wěn)定版本，然后使用<script>標(biāo)簽引入HTML頁面中，Vue會被注冊為一個(gè)全局變量。

在官網(wǎng)上提供了兩個(gè)版本：開發(fā)版本和生產(chǎn)版本，如圖1.3所示。

圖1.3　Vue的下載版本

注意　在開發(fā)環(huán)境下不要使用生產(chǎn)版本，不然就將失去所有常見錯(cuò)誤相關(guān)的警告！

下載完成后，直接使用<script>標(biāo)簽引入，代碼如下：

2．使用CDN的方式

對于制作原型或?qū)W習(xí)，可以這樣使用最新版本，代碼如下：

對于生產(chǎn)環(huán)境，推薦使用一個(gè)穩(wěn)定的版本號和構(gòu)建文件，以避免新版本造成的不可預(yù)期的破壞，代碼如下：

1.2.2　使用NPM方式

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

由于NPM安裝速度較慢，推薦使用淘寶鏡像CNPM，代碼如下：

1.2.3　使用命令行工具

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

CLI工具假定用戶對Node.js和相關(guān)構(gòu)建工具有一定程度的了解。如果你是新手，建議先熟悉Vue本身之后再使用CLI。本書在第4章將詳細(xì)介紹腳手架的安裝及如何創(chuàng)建Vue項(xiàng)目。

1.2.4　創(chuàng)建一個(gè)Vue實(shí)例

在本節(jié)使用Vue獨(dú)立版本，首先將Vue.js文件下載到本地項(xiàng)目目錄中，在HTML網(wǎng)頁文件中引入Vue框架，并在<body>底部使用new Vue（）的方式創(chuàng)建一個(gè)Vue實(shí)例對象。

index.html文件代碼如下：

在瀏覽器中打開網(wǎng)頁，推薦使用Google Chrome瀏覽器，運(yùn)行效果如圖1.4所示。

圖1.4　在瀏覽器中運(yùn)行的效果

官术网_书友最值得收藏!

Vue.js企業(yè)開發(fā)實(shí)戰(zhàn)

1.2 Vue的安裝與使用

1.2.1 直接使用<script>引入