第一步準備工作
node環境安裝：
1.1 如果本機沒有安裝node運作環境，請下載下傳node 安裝包進行安裝
1.2 如果本機已經安裝node的運作換，請更新至最新的node 版本
下載下傳位址：https://nodejs.org/en/ 或者 http://nodejs.cn/
一鍵式傻瓜操作下一步下一步...完成安裝
git的環境安裝：
為了快樂的使用指令行，我們推薦使用 gitbas，也是因為有的工具需要到github上下載下傳安裝，是以推薦安裝使用git。
下載下傳位址： https://git-for-windows.githu...
安裝完成的顯示是:
看到 Git Bash Here 。說明我們已經安裝成功git，下面就是檢查我們安裝的node是否安裝成功：
1.1 滑鼠右鍵打開git bash here視窗，在終端輸入 node -v
[email protected] MINGW64 ~/Desktop
$ node -v
v8.11.3
[email protected] MINGW64 ~/Desktop
$
輸出版本号，說明我們安裝node 環境成功,順便還可以檢視 npm 的 版本号：npm -v
[email protected] MINGW64 ~/Desktop
$ npm -v
4.6.1
[email protected] MINGW64 ~/Desktop
$
第二步正式安裝
vue-cli腳手架安裝:
如果通路外網比較慢，可以使用淘寶的鏡像 https://npm.taobao.org/
打開指令終端 npm install -g cnpm --registry=https://registry.npm.taobao.org
回車之後，我們就可以用 cnpm 替代 npm
[email protected] MINGW64 ~/Desktop
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
[email protected] MINGW64 ~/Desktop
$
恭喜你，你已經成功安裝了 cnpm。以後在項目中下載下傳vue的插件以及項目中需要npm的操作的時候，你都可以使用 cnpm 比npm的速度要快多了，
注：cnpm跟npm用法完全一緻，隻是在執行指令時将npm改為cnpm
如何更新npm的方法： 可以使用 npm install -g npm 來更新版本
以下操作我還是用npm來示範：
安裝vue-cli：npm install vue-cli -g
[email protected] MINGW64 ~/Desktop
$ npm install vue-cli -g
已經安裝成功！！！
第三步驗證vue環境
建立一個demo項目
1.1在自己的工作空間中建立一個檔案夾（自己任意命名即可，不推薦使用中文命名）
1.2 點選檔案夾進入我們的項目目錄，右鍵 Git Bash Here
1.3 初始化項目 vue init webpack vue-demo(vue官網推薦的demo)，一直回車到出現 ：Install vue-router? (Y/n)：
[email protected] MINGW64 /f/vue
$ vue init webpack vue-demo
? Project name (vue-demo)
? Project name vue-demo
? Project description (A Vue.js project)
? Project description A Vue.js project
? Author (<***********.com>)
? Author <***********.com>
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? (Y/n)
回車到這一步之後就要讓我們自己選擇工作空間所需要的東西了。
是否要安裝 vue-router 項目中肯定要使用到 是以 y 回車
是否需要 js 文法檢測 目前我們不需要 是以 n 回車
是否安裝 單元測試工具 目前我們不需要 是以 n 回車
是否需要 端到端測試工具 目前我們不需要 是以 n 回車
$ vue init webpack vue-demo
.
.
.
? Install vue-router? (Y/n) y
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n
? Use ESLint to lint your code? No
? Set up unit tests (Y/n) n
? Set up unit tests No
? Setup e2e tests with Nightwatch? (Y/n) n
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recom
? Should we run `npm install` for you after the project has been created? (recom
mended) npm
1.4運作我們所建立的項目
進入到我們的項目當中：cd vue-demo ,在執行 npm install（下載下傳本地vue運作環境和一些運作vue所需的包）
[email protected] MINGW64 /f/vue
$ cd vue-demo/
[email protected] MINGW64 /f/vue/vue-demo
$ npm install
image.png
下載下傳安裝成功，接下來執行 npm run dev 啟動這個項目
[email protected] MINGW64 /f/vue/vue-demo
$ npm run dev
> [email protected] dev F:\vue\vue-demo
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
.
.
.
Listening at http://localhost:8080
浏覽器自動打開
恭喜，你已經成功安裝，并運作起來vue基礎項目。
原文作者技術部落格：https://www.jianshu.com/u/ac4daaeecdfe
95後前端妹子一枚，愛閱讀，愛交友，将工作中遇到的問題記錄在這裡，希望給每一個看到的你能帶來一點幫助。
歡迎留言交流。