创建项目
vue create projectName 创建vue3项目
项目结构划分
components 物料堆（原子组件）
parses 物料堆的逻辑层（展示在画布）
pages 页面（用户信息页面、登录页面、app配置页面、app展示页面等）
routes 页面路由（与页面一一对应）
config 配置面板（每一类组件对应的配置类）
assets 静态资源（icon等）
fragments 基础组件
parse 原子组件的上层组件
hoc 高阶组件
utils 辅助函数或对象
基础页面搭建
样式
引入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，并新增如下代码
创建页面和路由
npm install vue-router@4 安装路由 使用cnpm无法安装
创建并到处路由实例
挂载路由并在app.vue中注册出口
使用栅格组件完成布局划分，并将布局的各个部分拆分成组件，效果如下
顶栏
顶栏一般由左侧的logo和右侧的功能区构成，功能区一般包括上线发布按钮和个人信息入口，由于是预研项目，则只考虑logo和简单的个人信息
物料堆
物料堆说白了更像是一个组件库，事实上，我也确实打算直接使用elementUI来充作物料堆。虽然我们的团队不够大，不会将物料堆单独抽离出来，但是作为一个可独立的ui项目，还是需要对外提供统一的入口的，常规的，我们可以在index.js文件内一个个导入并一个个export出去。但是这里其实可以更加智能化一些
可以借助webpack的require.contextapi动态引入并导出（parses同理）
画布
画布最基础的能力就是接收到拖拽的原子组件后渲染到画布中去，理论上来说，只要不是后期出现bug，画布是不会经常性的变动的，我们新增或删除物料堆中的组件，是不能再去修改画布中代码的。故考虑做成类似动态组件来加载
配置面板
所有的控制面板其实都是一个具有"属性"和"样式"的选项卡，属性就是给组件的传参，比如input组件可以传递placeholder、allowClear等，样式则是一些css设置，比如宽、高、边框等
这里我们使用slot做一个高阶组件
网友评论