vue.js安裝與配置

我們在前端學習中，學會了HTML、CSS、JS之後一般會選擇學習一些框架，像是Jquery、AngularJs等。這個系列的部落格文章是針對於學習Vue.js的同學展開的。

1.如何簡單地使用Vue.js

如同以前我們學過的Jquery一樣，我們在程式中使用Vue.js時也可以使用直接引用的方法，直接下載並用 標籤引入，Vue.js會被註冊為一個全域變數。這裡有一個重要提示：在Vue.js的官網有兩個版本，開發版本和生產版本，我們在開發時應用開發版本，遇到常見錯誤它會給出相應的警告。

當然，和Jquery一樣，Vue.js也可以使用CDN的形式引用在程式碼當中。在bootcdn網站中直接複製程式碼貼上就可以了，簡單又方便。

2.vue環境搭建

我們在用 Vue.js 構建大型應用時推薦使用 NPM 安裝， NPM 能很好地和諸如 Webpack 或諸如Browser 安裝模組器配合使用。 Vue.js 也提供配套工具來開發單一檔案元件。

Vue.js的建議開發環境為Nodejs。 npm:為Nodejs下的套件管理器。由於國內使用npm會很慢,這裡推薦使用淘寶NPM鏡像（其網址為http://npm.taobao.org/）。我們使用webpack進行資源的合併和打包以及使用vue-cli進行用戶生成Vue工程模板。

那麼，我們著重的講解一下如何建構一個適合的環境。

（1）如何安裝Nodejs

開啟Nodejs的官網（https://nodejs.org/en/），我們可以在頁面最中間看到Download這個詞，選擇對應的版本下載即可，建議下載後一個版本。也可以選擇下面的Other Downloads下載其他版本和Mac的版本。

下載完成後，使用傻瓜式安裝即可。安裝完成後可以先進行下簡單的測試安裝是否成功了，後面還要進行環境配置。在鍵盤按下【win R】鍵，輸入cmd，然後回車，打開cmd窗口，輸入node -v和npm -v即可顯示目前安裝的版本號，即表示安裝成功。新版的Node.js已自備npm，npm的功能就是對Node.js依賴的套件進行管理，也可以理解為用來安裝以及卸載Node.js所需裝的東西。

（2）安裝cnpm

由於有些npm有些資源被屏蔽或是國外資源的原因，常常會導致用npm安裝依賴套件的時候失敗，因此要麼FQ要麼就使用國內鏡像cnpm。打開https://npm.taobao.org/，我們可以了解到這是一個完整npmjs.org 鏡像，可以用此代替官方版本(只讀)，同步頻率目前為 10分鐘一次以保證盡量與官方服務同步。

同樣在命令列中輸入 npm install -g cnpm --registry=http://registry.npm.taobao.org 然後等待。

安裝完成之後，我們輸入cnpm -v偵測，當顯示下圖時為安裝成功。

（3）安裝vue-cli

vue-cli是一種全域腳手架用於幫助建立所需的模板框架，同理在cmd中輸入命令:npm install -g vue-cli。在這段程式碼中-g是為了全域使用的意思。與cnpm樣，安裝完成後會顯示一長串的文件，輸入 vue -v可以查看vue版本。此時，環境已經基本搭建成功。

（4）測試，建立第一個Vue.js專案

在命令列中輸入：vue init webpack my-first-demo(專案資料夾名)。

此處以及以後的設定可以輸入，也可以直接按回車和N。

這樣，第一個Vue.js專案就建立完成。打開對應的儲存位址就會看到這個文件，我的放在可user/倫倫/的下面。

透過輸入cd my-first-demo就可以進入目錄特定資料夾命令列中輸入：cnmp install或npm install安裝依賴套件。重新打開路徑下的資料夾，我們可以看到資料夾中比之前的資料夾多了一個node_modules資料夾，到此腳手架安裝完成。

（5）在命令列中輸入：npm run dev。

此指令會用熱載入的方式運行我們的應用，熱載入可以讓我們在修改完程式碼後不用手動刷新瀏覽器就能即時看到修改後的效果。

這裡簡單介紹下 npm run dev 指令，其中的「run」對應的是package.json檔案中，scripts欄位中的dev，也就是 node build/dev-server.js指令的一個捷徑。專案運作成功後，瀏覽器會自動開啟localhost:8080（如果瀏覽器沒有自動打開，可以手動輸入）。運行成功後，會看到如下所示的介面。此時，任務完成。

本文介紹了vue.js安裝與配置，更多相關內容請關注php中文網。