Vue2.0搭建Vue腳手架（vue-cli）

隨著vue。js越來越火爆，更多的專案都用到vue進行開發，在實際的開發專案中如何搭建開發腳手架呢，今天跟大家分享一下：

首先需要了解的知識

Html

Css

Javascript

Node。js 環境（npm包管理工具）

Webpack 自動化構建工具

一、安裝node.js

進入官網下載node。js

二、安裝 cnpm

1、說明：npm（node package manager）是nodejs的包管理器，用於node外掛管理（包括安裝、解除安裝、管理依賴等）；

2、使用npm安裝外掛：命令提示符執行npm install

3、選裝 cnpm 因為npm安裝外掛是從國外伺服器下載，受網路影響大，可能出現異常，如果npm的伺服器在中國就好了，所以我們樂於分享的淘寶團隊幹了這事！來自官網：

“這是一個完整 npmjs.org 映象，你可以用此代替官方版本(只讀)，同步頻率目前為 10分鐘 一次以保證儘量與官方服務同步。”

；

安裝：npm install -g cnpm ——registry=https：//registry。npm。taobao。org

輸入cnpm -v，可以檢視當前cnpm版本

三、安裝vue-cli腳手架構建工具

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

安裝：$ cnpm install vue-cli –g //g表示全域性安裝

安裝完成之後輸入 vue -V（注意這裡是大寫的“V”），如下圖，如果出現相應的版本號，則說明安裝成功。

四、建立一個基於webpack模板的新專案

要建立專案，首先我們要選定目錄，然後再命令列中把目錄轉到選定的目錄。可以使用：

$ vue init webpack my-app // my-app為自定義專案名

執行初始化命令的時候回讓使用者輸入幾個基本的選項，如專案名稱，描述，作者等資訊，如果不想填直接回車預設就好

Project name （my-app） # 專案名稱（我的專案）

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 run dev

執行成功後，瀏覽器直接顯示的是頁面如下：

六、安裝專案所需要的依賴

剛初始化的專案是沒有依賴的，如果執行會報類似這樣的錯誤，輸入命令

$ cnpm install

轉發+關注我吧，每天更新web前端乾貨知識，原創需要大家的支援，你們的支援是我更新最大的動力！