工作笔记--UI部分

1. 搭建环境

进入项目的文件夹，打开git命令框，输入以下命令

npm install -l
npm i -g live-server
npm run dev

在此处在另外打开一个窗口

live-server
live-server --port=8080

则项目就会跑起来

2. ui问题

1）

块元素：<div>, <p>, <h1>, <form>, <ul> 和<li>
行内元素：a em input span

2）如何使border的高度和字体一样，(应用场景，菜单中的竖线)

不要设置height，让其随着内容自适应，则border高度和字体一样，示例如下

#topbar-list li a{
display:inline-block;
width:56px;
border-right:1px solid;
cursor:pointer;
font-size:14px;
margin:0 14px;
padding-right:4px;
}

3）如果元素另起一行显示，则要考虑前一个标签是否是块元素

4）如果元素显示不出来，可能是没有设置宽高

5）如何触发一个事件，即把这边接受到的参数传递到那边去

①在vm/src/EventEnum.js中添加一个变量  TOP_BAR_DESIGN_NAME:  Symbol()
②
//触发当前实例上的事件。附加参数都会传给监听器回调。如下会把saveCurrentDesign.designMeta.Name这个参数传过去
bus.$emit(jtl.EventEnum.TOP_BAR_DESIGN_NAME,saveCurrentDesign.designMeta.Name);
③在vue中接受参数
bus.$on(jtl.EventEnum.TOP_BAR_DESIGN_NAME,(name) => {
this.designName=name;
}

6）新建一个组件之前 先在apps\design\vm\src\app.vue里面添加一些东西