Vue2.0搭建Vue鷹架的方法

這篇文章主要介紹了Vue2.0搭建Vue鷹架的方法，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

介紹
Vue.js是一套建構使用者介面的漸進式框架。
Vue 只關注視圖層，採用自底向上增量開發的設計。
Vue 的目標是透過盡可能簡單的 API 來實現回應的資料綁定和組合的視圖元件。

閱讀之前需要了解的知識
htnl
css
javascript
node.js環境(npm套件管理工具）
webpack打包工具
安裝node.js

電腦開啟win R  開啟以下介面

從node官網下載並安裝node，安裝步驟很簡單，只要一路「next」就可以了。
安裝完成後，開啟命令列工具輸入指令node -v，如下圖，如果出現對應版本號，就表示安裝成功了。

我們所需要的npm套件管理器，是整合在node中的，所以，直接輸入npm -v就會如下圖所示，顯示出npm的版本資訊。

到這裡node的環境已經安裝完了,npm套件管理工具也有了，但是由於npm的有些資源被牆，為了更快更穩定,所以我們需要切換到淘寶的npm鏡像——cnpm。

安裝cnpm
點擊進入淘寶的cnpm網站,裡面有詳細的設定方法。
或直接在命令列輸入：

$ npm install -g cnpm --registry=https://registry.npm.taobao.org
然後等待，安裝完成。

輸入cnpm -v，可以查看目前cnpm版本，這個和npm的版本還是不一樣的。

使用cnpm的方法就是，需要用到npm的地方直接使用cnpm替換就可以了

vue安裝
在用vue.js建置大型應用程式時建議使用npm 安裝，npm 能很好地和諸如webpack 或browserify 模組打包器搭配使用。 vue.js 也提供配套工具來開發單一檔案元件。

$ cnpm install vue

安裝vue-cli腳手架建置工具
vue-cli 提供一個官方命令列工具，可用來快速建立大型單頁應用。該工具提供開箱即用的建置工具配置，帶來現代化的前端開發流程。只需幾分鐘即可建立並啟動一個帶有熱重載、保存時靜態檢查以及可用於生產環境的構建配置的項目：

全域安裝vue-cli

##$ cnpm install --global vue-cli

建立一個基於webpack 模板的新項目
要建立項目，首先我們要選定目錄，然後再命令列中把目錄轉到選定的目錄。可以使用：

my-project為自訂項目名稱

$ vue init webpack my-project

初始化一個項目，或使用

$ vue init webpack- simple my-project

初始化一個簡單的項目

#運行初始化命令的時候回讓用戶輸入幾個基本的選項，如項目名稱，描述，作者等訊息，如果不想填直接回車默認就好。

要注意的是項目的名稱不能大寫，不然會報錯。

Project name (my-project) # 專案名稱（我的專案）

Project description (A Vue.js project) # 專案描述一個Vue.js 專案

# Author 作者（你的名字）

Install vue-router? (Y/n) # 是否安裝Vue路由，也就是以後是spa（但頁面應用需要的模組）

Use ESLint to lint your code? (Y/n) # 使用ESLint 到你的程式碼？ （Y [ yes ] / N [ no ]）

Pick an ESLint preset (Use arrow keys) # 選擇一個預置ESLint（使用箭頭鍵）

Setup unit tests with Karma Mocha? (Y/n) # 設定單元測Karma Mocha？ （Y/ N）

Setup e2e tests with Nightwatch? (Y/n) # 設定端對端測試，Nightwatch？ （Y/ N）

當然這些都看你自己個人的情況，我這裡是全選了是。

所以在這之前需要解決專案的依賴問題，使用下面的命令安裝專案的依賴。

$ cnpm install

如果出現如下圖情況，表示依賴解決成功。

運行項目

$ npm run dev

#

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

相關推薦：

如何解決vue中methods中的方法閉包快取的問題

Vue2.0自訂指令與實例的屬性與方法

以上是Vue2.0搭建Vue鷹架的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！