1.安裝node.js

從node官網(wǎng)下載并安裝node，安裝步驟很簡單，只要一路“next”就可以了。
安裝完成后，打開命令行工具輸入命令node -v，如下圖，如果出現(xiàn)對應(yīng)版本號，就說明安裝成功了。

我們所需要的npm包管理器，是集成在node中的，所以，直接輸入npm -v就會如下圖所示，顯示出npm的版本信息。

到這里node的環(huán)境已經(jīng)安裝完了,npm包管理工具也有了，但是由于npm的有些資源被墻，為了更快更穩(wěn)定,所以我們需要切換到淘寶的npm鏡像——cnpm。

2.安裝cnpm

點(diǎn)擊進(jìn)入淘寶的cnpm網(wǎng)站,里面有詳細(xì)的配置方法。
或者直接在命令行輸入：

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

?

然后等待，安裝完成。

輸入cnpm -v，可以查看當(dāng)前cnpm版本，這個和npm的版本還是不一樣的。

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

3.vue安裝

在用 vue.js 構(gòu)建大型應(yīng)用時推薦使用 npm 安裝，npm 能很好地和諸如 webpack 或 browserify 模塊打包器配合使用。vue.js 也提供配套工具來開發(fā)單文件組件。

$ cnpm install vue

?4.安裝vue-cli腳手架構(gòu)建工具

vue-cli 提供一個官方命令行工具，可用于快速搭建大型單頁應(yīng)用。該工具提供開箱即用的構(gòu)建工具配置，帶來現(xiàn)代化的前端開發(fā)流程。只需幾分鐘即可創(chuàng)建并啟動一個帶熱重載、保存時靜態(tài)檢查以及可用于生產(chǎn)環(huán)境的構(gòu)建配置的項(xiàng)目：

#my-project為自定義項(xiàng)目名 $ vue init webpack my-project

初始化一個項(xiàng)目，或使用

$ vue init webpack-simple my-project

初始化一個簡單的項(xiàng)目

運(yùn)行初始化命令的時候回讓用戶輸入幾個基本的選項(xiàng)，如項(xiàng)目名稱，描述，作者等信息，如果不想填直接回車默認(rèn)就好。

?需要注意的是項(xiàng)目的名稱不能大寫，不然會報錯

?

Project name (my-project) # 項(xiàng)目名稱（我的項(xiàng)目）

Project description (A Vue.js project) # 項(xiàng)目描述一個Vue.js 項(xiàng)目

Author 作者（你的名字）

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

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

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

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

Setup e2e tests with Nightwatch? (Y/n) # 設(shè)置端到端測試，Nightwatch？ （Y/ N）

當(dāng)然這些都看你自己個人的情況，我這里是全選了是。

5.安裝項(xiàng)目所需要的依賴

剛初始化的項(xiàng)目是沒有依賴的，如果運(yùn)行會報類似這樣的錯誤，

所以在這之前需要解決項(xiàng)目的依賴問題，使用下面的命令安裝項(xiàng)目的依賴。

$ cnpm install

如果出現(xiàn)如下圖情況，說明依賴解決成功。

6.運(yùn)行項(xiàng)目

$ cnpm run dev

如果看到這個界面，說明配置成功

轉(zhuǎn)載于:https://www.cnblogs.com/ganws/p/11138175.html

總結(jié)

以上是生活随笔為你收集整理的vue2.0搭建vue手脚架（vue-cli）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。