參考

之前寫專案的時候用的在網上下載的框架，現在工作之餘研究了一下，捨去被人專案中冗餘的東西，自己按照思路重新搭建， 有些方法還是之前框架中的方法。只用於參考，也可以自己寫。

所需工具

• 包管理工具：npm，基於node.js
• 模組打包工具：webpack

框架體系

• MVVM框架：Vue.js
• 專案腳手架：vue-cli
• UI元件庫：Element UI
• 路由配置：vue-router
• 前端請求介面：axios
• 狀態管理工具：Vuex
• 指令碼語言：ES6語法
• css前處理器：scss樣式前處理器

搭建專案

1. 使用vue cli 3.0 搭建專案（注：安裝步驟在第一個文章裡）

   

   cd...（檔名） 進入專案
2. 安裝Element Ui元件庫 （依照官網文件安裝）

3.清空頁面的相關元件，並清空路由

在測試檔案中使用element元件判斷是否引入成功

專案目錄及資料夾的分類

資料夾的分類雖然看起來是一個小問題，但是因為一般寫專案時候檔案會很多且專案體系龐大，所以必須梳理好專案目錄結構及檔案的分類，以便於以後找相關元件起來清晰明瞭。

不要在意我為什麼倒著描述...

• 在view資料夾存放所使用的vue元件，在這裡我一般習慣於把login/404/home頁放於common公共資料夾裡/modules裡面放頁面元件
• until資料夾裡會存放一些專案使用到的公共方法/封裝的函式(例如session/cookie的存取/許可權判斷等)
• store狀態管理倉庫modules放一些不變的專案名稱/鍵名(可以不用在store資料夾裡面再建modules資料夾，看個人喜好)
• router路由
• components會放一些外部引入的元件（echats之類）
• assets（scss/font/image資原始檔夾）

功能實現

• 頁面跳轉

在login元件給一個登入按鈕 意思一下 @_@

• 接下來配置路由實現元件的巢狀結構

持續更新...