前言

最近公司專案需要做一個小型的填報的錄入系統，根據業務的具體分析，採用了基於vue2.0 + webpack+axios+elementUi+vue-router+vuex全家桶的技術棧構建錄入系統，同時也作為學習vue全家桶技術棧的一個學習記錄。

專案初始化

第一步：安裝vue-cli，推薦全域性安裝，安裝過程請耐心等待

npm install -g vue-cli  

第二步 初始化專案，首先開啟需要存放的專案位置，然後在輸入vue init webpack vue-input-report 直接一路回車就行，然後等待專案的初始化。

vue init webpack vue-input-report
 

資料夾的解釋

• build    build資料夾中存放了啟動專案的配置檔案，如下圖

• config    config資料夾中存放了配置專案是生產環境和開發環境以及bulid的一些資訊

• dist    dist 資料夾存放編譯後，上線使用的前端檔案。
• src    src 存放的是專案開發中原始碼的位置
• static    static 存放的是專案載入的靜態資源的檔案
• index.html    index.html專案的入口頁面
• package.json    package.json 存放專案所需的安裝的依賴和版本等資訊

專案執行

在命令列中輸入npm run dev 等待專案啟動

npm run dev

在瀏覽器中輸入localhost:8080將會訪問到如下圖所示（我這裡已經重定向到登入頁面了）