首先這裏記錄的是基於安裝node.js 的npm安裝vue 如果你不是用的node與npm 那就不必往下看了

1.安裝node.js這個不多說 百度有很多

2.安裝webpack

全局安裝webpack(直接安裝全局即可，以後要經常使用，安裝後直接進入第三步)
npm install webpack -g

這裏補充一下

全局安裝就是裝一次任何時候任何項目都可以直接使用，一般情況下我是在C盤或者D盤根目錄下創建一個www文件夾，（路徑一切非包含中文）

然後所有的項目都放到這個www文件夾裏面 全局安裝的插件什麽的包括後期創建的項目都需要先cd到www文件後執行npm命令，

這樣便於管理和後期查找項目文件和配置文件

依賴項安裝是cd 到項目後安裝 僅作為這個項目的使用依賴項 其他項目不能公用

通常我們會將webpack安裝到項目依賴，這樣就可以使用本地版本的webpack（不安裝全局,作為依賴項也可以）
//node啟動 cd進入項目目錄
//確定已有package.json，沒有就npm init 創建
$ npm install webpack --save-dev

//查看webpack 版本信息
$ npm info webpack
//安裝指定版本
$ npm install [email protected] --save-dev
如果要使用webpack開發工具，要單獨安裝 webpack-dev-server
$ npm install webpack-dev-server --save-dev

3.安裝vue-cli腳手架 腳手架集成了很多必須的包和配置 也是官方推薦的安裝

單頁面應用環境一次性搭建 官方推薦 底層基於webpack搭建的

全局安裝 vue-cli
npm install --global vue-cli

4.創建一個vue基於 webpack 模板的新項目 在www目錄下
vue init webpack my-project (my-project)是項目名字，非中文 可以自己更換

然後自動下載東西（模板） 幾秒鐘後問你文件名字確定用這個 可以更改

這裏我不改了

然後回車-回車-回車-再回車（應該是四下） 慢點 接著出現 y/n選項了

這裏我們輸入y (第一次)

下面又出現y/n （下面的幾項全選n，應該是三個n）也就是只有第一個是y

這裏停頓一下 千萬不要按快了 出現下面選項 （需要執行嚴格模式之類的）就是你編寫代碼的時候 上下行格式必須有空四格，必須加引號之類的

這裏我們選擇最後一個No, I will handle that myself 方向鍵控制 然後回車

>Yes, use NPM
Yes, use Yarn
No, I will handle that myself（選擇這一項）

然後cd到你的項目文件夾下（必須 否則報錯）

D:\www>cd my-project

然後輸入指令 npm i 安裝項目所需要的依賴包

如果npm安裝不上的話，可以使用淘寶鏡像cnpm安裝 前提是先安裝淘寶鏡像（自行百度，或者看我的另一個文章）

並且如果你的安裝過程中開始如果使用了npm 就絕對不能在使用cnpm 反之同樣

（查看當時用什麽方法安裝的可以打開項目本地D:\www\my-project\node_modules文件夾，一直往下拉,看文件夾圖標帶不帶快捷方式的小箭頭，如果有就是cnpm方式，正常文件夾圖標就是npm方式安裝，這個只有在安裝後執行npm run dev命令後才有這個node_module文件夾）

好了 一個基於webpack的vue項目文件就創建完成了

下面我們cd 到項目文件中 我的在D盤 根據自己的選擇

D:\www>cd my-project

然後npm run dev（或者npm start） 回車 等個幾秒鐘 出現 Your application is running here: http://localhost:8080

瀏覽器會自動打開localhost:8080 看到vue頁面就可以了 如果沒有自動打開 就自己輸入地址打開 這個無所謂的

然後打開本地的項目文件夾 拖到Hbuider 或者vscode編輯器中就可以開始編輯項目了 這裏推薦vscode 安裝vetur插件 很好用

當我們安裝完成後就可以安裝其他的vue全家桶 需要什麽裝什麽

npm i element-ui -S 安裝餓了麽UI框架
npm install axios　　　　安裝axios,官網推薦安裝的封裝的ajax　
npm install vuex --save 這個一般大點的復雜項目用

對於安裝完成後項目的每個文件是用處可以百度或者點擊菜鳥教程的 http://www.runoob.com/vue2/vue-directory-structure.html 進行查看

vue的安裝與使用