- Vue.js企業開發實戰
- 千鋒教育高教產品研發部編著
- 740字
- 2022-07-28 19:42:40
1.2 Vue的安裝與使用
本節我們來學習一下如何安裝及使用Vue框架。
1.2.1 直接使用<script>引入
直接使用Vue有兩種方式，一種是使用獨立的版本；另一種是使用CDN的方式。本書在第1~3章使用Vue的獨立版本進行講解，對于Vue的初學者也推薦使用這種方式入門。從第4章開始，使用Vue的腳手架創建項目。
1．使用獨立的版本
在Vue官網http：//cn.vuejs.org下載最新穩定版本，然后使用<script>標簽引入HTML頁面中，Vue會被注冊為一個全局變量。
在官網上提供了兩個版本：開發版本和生產版本，如圖1.3所示。
圖1.3 Vue的下載版本
注意 在開發環境下不要使用生產版本，不然就將失去所有常見錯誤相關的警告！
下載完成后，直接使用<script>標簽引入，代碼如下：
2．使用CDN的方式
對于制作原型或學習，可以這樣使用最新版本，代碼如下：
對于生產環境，推薦使用一個穩定的版本號和構建文件，以避免新版本造成的不可預期的破壞，代碼如下：
1.2.2 使用NPM方式
在用Vue構建大型應用時推薦使用NPM安裝。NPM能很好地和諸如Webpack或Browserify模塊打包器等工具配合使用。同時Vue也提供配套工具來開發單文件組件，安裝代碼如下：
由于NPM安裝速度較慢，推薦使用淘寶鏡像CNPM，代碼如下：
1.2.3 使用命令行工具
Vue提供了一個官方的CLI，為單頁面應用（SPA）快速搭建繁雜的腳手架。它為現代前端工作流提供了batteries-included的構建設置。只需幾分鐘就可以運行起來并帶有熱重載、保存時lint校驗，以及生產環境可用的構建版本。
CLI工具假定用戶對Node.js和相關構建工具有一定程度的了解。如果你是新手，建議先熟悉Vue本身之后再使用CLI。本書在第4章將詳細介紹腳手架的安裝及如何創建Vue項目。
1.2.4 創建一個Vue實例
在本節使用Vue獨立版本，首先將Vue.js文件下載到本地項目目錄中，在HTML網頁文件中引入Vue框架，并在<body>底部使用new Vue（）的方式創建一個Vue實例對象。
index.html文件代碼如下：
在瀏覽器中打開網頁，推薦使用Google Chrome瀏覽器，運行效果如圖1.4所示。
圖1.4 在瀏覽器中運行的效果