1. 前言簡介

Vuestic UI是一個基于開源Vue 3的UI框架。它是一個MIT許可的UI框架，提供了易于配置的現成前端組件，并加快了響應式和快速加載Web界面的開發。它最初于2021年5月由EpicMax發布，這就是今天的Vuestic UI。 官網地址請點擊訪問 體驗下來感覺還是不錯的，基本上沒有太大的問題，各位讀者可以放心上手😁（圖片放上來會違規，這里就不放了）

不知各位大牛們是否用慣vue-element-admin，對于大差不大的界面UI有沒有考慮過換一個開源框架？樓主在這里開了一個投票，歡迎大家踴躍投票或者在評論區發表自己的看法

下面我就帶著大伙快速熟悉并從1-100+二次開發vuestic-ui😄 （結合官網內容并引入自己見解）

2.Quick start

首先檢查本地npm版本，官網中最低要求如下，如果沒安裝的小伙伴可以先自行安裝下載

• Node.js (>=v14.0.0)
• npm (>=v3.0.0) (or yarn (>= v1.16.0)) and Git

2.1 用官方推薦方式新建一個腳手架（控制臺中操作）

npm create vuestic@latest

在等待的過程中有一些提示，按Y+entry就好啦
注意：如果沒有提示的話需要手動下載依賴，如下（正常不需要這部）

npm install

2.2 運行啟動🚀

npm run dev

正常啟動的話，就會看到如下界面，點擊連接本地正常訪問。做到這里恭喜你成功本地運行vuestic-ui👍成功一半啦

3. 架構

為了美觀，我就拆成兩塊來截圖的，其實是在一個文件夾中😁從整體架構來看跟vue-element-admin是不是差不多，都是基于Vue開發的所以上手起來并不難。不同的是大部分使用ts語言更多，要是ts語法不懂不用慌，本人也沒有ts語法基礎，現學現用，而且ts兼容js，不懂的語法可以ai一下或者直接看官方文檔

從上圖左邊的父目錄上來分，可以做如下分類：

1. docs ： 幫助文檔，官網寫的有問題可以看一看
2. node_modules : npm install 下載的項目依賴都在這里面
3. public ： 公共資源，放一下圖片圖標啥的
4. src ： 這里就是核心代碼啦，也是我們二次開發最主要關注的地方

3.1 src 核心分析

做為二次開發，講究的是一個快速上手，所以什么是我們需要了解的，什么是我們不需要了解的，博主在這就先分清楚，幫大家省下時間

1. api ： 由于初始的quick start版本用的是靜態數據，沒有動態通過后端從數據庫中獲取。所以是沒有該文件夾的，api這個文件夾下定義的都是調用axios對后端發送異步請求的方法，這些具體的實現細節后面會講到
2. page : 根據意思也可以猜出這個文件夾中放的就是一些能在網頁上看到的vue頁面，后續新增修改頁面都是在這個文件夾下
3. router ： 路由，也就是訪問路徑，像是我怎么通過側邊欄點擊跳轉到相應的頁面，這里面寫的都是靜態路由，后續有動態獲取路由的教程，大家可以點個關注不迷路~
4. stores ： 該文件夾里面放的是一些vuex為vue開發的狀態管理器，它包含著你的項目中大量的狀態。后續做登錄權限管理需要存儲token的時候會詳細講解，大家先有個印象是干嘛的
5. utils ： 這個也是初始的quick start版本沒有的文件夾，該文件夾就存放一些工具類，比如后續用ts整合axios寫的request.ts就放在其中，同上這些具體的實現細節后面會講到

---

以上就是我認為做為二次開發小白最常用的幾個地方，其他的要是有用到可以再查一查。
能看到這里，相信大家已經迫不及待開發屬于自己的網站了吧，剩下的教程為了方便大家學習會分為下面的幾個專題，方便大家學習感興趣的模塊😊

• 基于 vuestic-ui 實戰教程 - 獲取動態數據篇
• 基于 vuestic-ui 實戰教程 - 登錄篇
• 基于vuestic-ui實戰教程 - 頁面篇