項目中需要用到vue-cli腳手架來搭建前端框架，對於vue小白，總結一下自己遇到的問題以及解決方案，還要學習的地方有很多。

vue-cli安裝下載網上有很多教程，推薦看https://www.jianshu.com/p/5ba253651c3b，有很詳細的項目搭建，但對於新手而言，有些地方需要自己摸索才能明白，對於，將我的總結心得分享一下。

安裝vue-cli時出現安裝不上的問題

安裝webpack時，執行npm install webpack -g，但是檢查是否安裝上時（webpack -v）出現下圖問題

但是按照npm install webpack-cli -D執行命令執行，仍然還是安裝不上，這裏解決方式是執行npm install webpack-cli -g，執行一遍就能安裝上了。

安裝完成後，用webstrom打開項目（其他編輯軟件也可）會出現如下結構

到此一切很順利，項目雛形搭建完成了。建議在搭建項目之前對於vue基礎知識有一定的掌握，在使用組件時，有很大幫助。

接下來介紹一下項目中各個文件的用法

根據項目結構也能看出，index.html是入口，那只有一個主頁面，怎麽進行多個頁面的跳轉呢？

這裏就應用到vue的組件，相當於直接在組件內將所有頁面定義好，只要切換組件就可以了，而src->components目錄下的所有vue文件就是一個個的組件，在組件之內是可以相互引用的（後面回詳細解答）。也可以自己創建目錄放vue文件（src->pages文件）。

組件詳解：

拿一個例子，講解一下組件中各個部分的應用與說明

現在大概了解頁面是怎麽創建出來的，但是如何引用相應的組件呢？

這裏就用到src->main.js與src->router->index.js兩個文件

main.js

index.js

至此，項目內常用的幾個文件之間的調用與結構大致如圖，在index.js 當中還可引入需要應用的其他插件。

未完待續。。。

vue-cli新手總結