一、 node 和npm
1、在安裝vue-cli前，要確認自己的電腦是否安裝了node和npm
2、查詢版本如下（vue腳手架支持node@4.xx以上）
node -v 查詢node版本
npm -v 查詢npm版本
二、全局安裝vue-cli
1、安裝命令
npm install -g vue-cli // -g是安裝到全局
2、安裝后可終端輸入vue回車查看 vue對應命令，如下
三、初始化項目
1、命令如下
vue init webpack yyb //yyb是項目名
2、等模板下載成功后，或有一個交互式的選項選擇，根據選擇內容填寫和回車就好
3、初始化完成后，會提示開啟腳手架的命令，如下
4、cd yyb 為進入項目文件夾，然后npm run dev啟動腳手架
5、啟動成功會顯示如下
提示 運行腳手架 打開http://localhost:8081即可
6、運行成功如下
好，到這步vue-cli的安裝和運行就完成了
四、腳手架的目錄文件
1、目錄介紹
build/ // 項目構建(webpack)相關代碼 build.js // 生產環境構建代碼 check-versions.js // 檢查node&npm等版本
logo.png //vue logo utils.js // 構建配置公用工具 vue-loader.conf.js // vue加載器 webpack.base.conf.js // webpack基礎環境配置 webpack.dev.conf.js // webpack開發環境配置 webpack.prod.conf.js // webpack生產環境配置 config/ // 項目開發環境配置相關代碼 dev.env.js // 開發環境變量（看詞明意） index.js //項目一些配置變量 prod.env.js // 生產環境變量 test.env.js // 測試環境變量 dist/ //npm run build打包后生成的文件夾 node_modules/ ... // 項目依賴的模塊 src/ // 源碼目錄 assets/ // 資源目錄 logo.png components/ // vue公共組件
router/ // 前端路由 index.js// 路由配置文件 store/ // vuex的狀態管理 App.vue // 頁面入口文件（根組件） main.js // 程序入口文件（入口js文件） static // 靜態文件，比如一些圖片，json數據等 .gitkeep //這個里面的gitkeep是這個目錄為空，也可以把這個目錄提交的git倉庫里面，因為通常一個空目錄是不能提交git倉庫里面的 .babelrc// ES6語法編譯配置 .editorconfig// 定義代碼格式 .gitignore// git上傳需要忽略的文件格式 index.html// 入口頁面 package.json// 項目基本信息 README.md// 項目說明