前言: 初學Vue是有一定的學習成本的。比如我剛開始接觸Vue時，我還未接觸node.js，腳手架webpack。在安裝時就遇到了難題。vue-cli作為一款mvvm框架語言(vue)的腳手架，集成了webpack環境及主要依賴，對于項目的搭建、打包、維護管理等都非常方便快捷。

一、安裝Node環境

在node.js官網下載穩定版本，我是在Windows下安裝的。

 

下載完成后點擊安裝，安裝過程很簡單，一直next即可，安裝完成會自動添加node及npm環境變量。

檢驗是否安裝成功，在cmd輸入命令 node -v,回車 及 npm -v,回車，如出現下圖所示版本信息，表示安裝成功

 

二、安裝vue-cli

打開cmd命令行工具，輸入npm install -g vue-cli,回車 全局安裝vue-cli

(注：npm會有點慢，建議更改為國內淘寶的鏡像，只換源即可。在cmd輸入命令：npm config set registry https://registry.npm.taobao.org)

構建vue-cli項目

1、創建項目

打開cmd，進入想要創建項目的目錄下，輸入：vue init webpack projectname

projextname是自定義的項目名稱，例：我這里命名為vuedemo

 

命令輸入完成后敲回車，此時會自動下載template模板，稍微等待一會，會讓你按提示完成項目的創建，如下圖

創建vue-cli項目

Project name:——項目名稱

Project description:——項目描述

Author:——作者

Vue build:——構建模式，一般默認選擇第一種

Install vue-router?:——是否安裝引入vue-router，這里選是，vue-router是路由組件,后面構建項目會用到

Use ESLint to lint your code?:——這里強烈建議選no 否則你會非常痛苦，eslint的格式驗證非常嚴格，多一個空格少一個空格都會報錯，所以對于新手來說，一般不建議開啟，會加大開發難度

Setup unit tests with Karma + Mocha 以及Setup e2e tests with Nightwatch這兩個是測試，可以不用安裝

2、安裝依賴

項目創建完成，打開文件夾可以看到目錄結構如下

未安裝依賴時項目結構  

此時，項目已經初具雛形，但還未安裝依賴。安裝依賴庫就是node_modules目錄下一堆的庫。這里你先簡單理解為項目運行所需的東西就好。打開cmd，進入項目所在根目錄下，輸入npm install，回車，如果網絡不好，需要一段時間。

依賴安裝中

依賴安裝結束

我們此時再打開項目文件夾，可以看到多了node_modules文件夾，里面是各種需要的依賴包

安裝依賴后項目結構  

3、運行項目

打開cmd，進入到項目所在目錄下，輸入npm run dev,回車，啟動項目

 

完成后，瀏覽器會自動打開，監聽端口8080

 

可以在瀏覽器看到如下畫面，恭喜你，已成功構建vue-cli項目，接下來就可以開始開發啦

成功了

你也許初學，不懂webpack，node.js，vue.cli，OK，沒關系，照著這篇文章一步步做下來，安裝webpack,npm,node,vue.cli，最終能運npm dev run運行項目即可。至少你現在能訪問vue項目的頁面了。