文章目錄
- 1 項目啟動
-
- 1.1 創建和啟動項目(vite+vue)
- 1.2 清理不需要的代碼
- 1.3 下載必備的依賴(element-plus)
- 1.4 完整引入并注冊(main.sj)
- 1.5 設置@別名(vite.config.js)
- 2 el-tree樹形控件
-
- 2.1 TreeComponents.vue
-
- 2.1.1 模板部分
- 2.1.2 類型定義(Tree)
- 2.1.3 樹形數據(data)
- 2.1.4 整體代碼
- 2.2 App.vue
- 3 示例應用
-
- 3.1 樹形數據(TreeComponent.vue)
- 3.2 效果如下
- 4 附錄
-
- 4.1 路徑枚舉轉換為嵌套JSON
- 4.2 參考附錄
使用el-tree控件，通過構建嵌套json數據格式，實現樹形數據結構展示。
1 項目啟動
1.1 創建和啟動項目(vite+vue)
創建vue3+vite的項目
CMD>npm create vite@latest vue3_vite_tree -- --template vue
CMD>cd vue3_vite_backend
CMD>npm install 安裝依賴
CMD>npm run dev 啟動項目
1.2 清理不需要的代碼
進入src目錄
(1)刪除style.css文件
(2)刪除main.js中對style.css的引用。
(3)刪除components中的HelloWorld.vue組件。
(4)刪除App.vue中對HelloWorld組件的引用，修改template標簽中的內容為123，清空style中的
