創(chuàng)建項目
? ? vue create projectName 創(chuàng)建vue3項目
項目結構劃分
? ? components? 物料堆（原子組件）
? ? parses 物料堆的邏輯層（展示在畫布）
? ? pages? 頁面（用戶信息頁面、登錄頁面、app配置頁面、app展示頁面等）
? ? routes? 頁面路由（與頁面一一對應）
? ? config? 配置面板（每一類組件對應的配置類）
? ? assets? 靜態(tài)資源（icon等）
? ? fragments? 基礎組件
? ? parse 原子組件的上層組件
? ? hoc 高階組件
? ? utils 輔助函數或對象
基礎頁面搭建
? ??樣式
????????引入reset.css
? ? ? ? 引入less支持
? ??????????npm install -D less less-loader@7.x
? ??利用elementUI的柵格能力快速完成頁面布局，同時由于對頁面樣式無特殊化要求，可直接將其組件作為物料堆組件
? ??????安裝組件庫
????????????cnpm install element-plus --save??
? ? ? ? 注冊組件
? ??????????import ElementPlus from 'element-plus'
????????????import 'element-plus/dist/index.css'
? ??????????app.use(ElementPlus)
? ??定義一些別名
? ? ? ? ? ? 在根目錄下新增vue.config.js，并新增如下代碼
? ??創(chuàng)建頁面和路由
? ??????npm install vue-router@4 安裝路由??使用cnpm無法安裝
? ? ? ? 創(chuàng)建并到處路由實例
? ? ? ? 掛載路由并在app.vue中注冊出口
? ??????使用柵格組件完成布局劃分，并將布局的各個部分拆分成組件，效果如下
頂欄
? ? 頂欄一般由左側的logo和右側的功能區(qū)構成，功能區(qū)一般包括上線發(fā)布按鈕和個人信息入口，由于是預研項目，則只考慮logo和簡單的個人信息
物料堆
? ? 物料堆說白了更像是一個組件庫，事實上，我也確實打算直接使用elementUI來充作物料堆。雖然我們的團隊不夠大，不會將物料堆單獨抽離出來，但是作為一個可獨立的ui項目，還是需要對外提供統一的入口的，常規(guī)的，我們可以在index.js文件內一個個導入并一個個export出去。但是這里其實可以更加智能化一些
? ? 可以借助webpack的require.contextapi動態(tài)引入并導出（parses同理）
畫布
? ? 畫布最基礎的能力就是接收到拖拽的原子組件后渲染到畫布中去，理論上來說，只要不是后期出現bug，畫布是不會經常性的變動的，我們新增或刪除物料堆中的組件，是不能再去修改畫布中代碼的。故考慮做成類似動態(tài)組件來加載
配置面板
? ? 所有的控制面板其實都是一個具有"屬性"和"樣式"的選項卡，屬性就是給組件的傳參，比如input組件可以傳遞placeholder、allowClear等，樣式則是一些css設置，比如寬、高、邊框等
? ? 這里我們使用slot做一個高階組件
