由于本次项目不是学校的大作业之类的，因为一些其他因素，就不会像先前一样展示全部代码，而是以代码片段的形式去记录组件内容。
我认为本次项目构建分为三个模块，分别为页面设计、js响应、API设置，这么看后两者关联挺大，但还是先实现页面设计为上。
9月12号笔记
今日所学：项目构建：页面设计。
登陆页面：第二次写，还是遇到些问题。
1、右置实现：对于按钮组的右置实现，可以采用display处理原有div后，再以flex-direction的row-reserve配置来进行自右向左的实现。
分别为：
display: flex;
------------------------------------------
display: flex;
flex-direction:row-reverse;
2、Input填充：配置input在某一div中，需要其完全填充整个div，则可以采用flex-grow的方式进行安置。
flex-grow: 1;
主页面：主页面是第一次写，主要难点可能是左侧导航实现和右侧数据的大量页面跳转。
为减少编写时间，接下来将会引入element作为主要UI组件。
Element相关：
安装element，直接输入指令即可。npm install element-plus --save，当然用cnpm快点。
导入element，直接在main.js中import element即可，代码如下：
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
createApp(App).use(ElementPlus)
出现了一些问题，在使用el标签且导入内部文本时，会出现以下报错：
Uncaught TypeError: Cannot read properties of null (reading 'ce') at renderSlot (runtime-core.esm-bundler.js:2763:32) at eval (button2.mjs:84:60) at normalizeChildren (runtime-core.esm-bundler.js:6815:34) at createBaseVNode (runtime-core.esm-bundler.js:6629:5) at _createVNode (runtime-core.esm-bundler.js:6705:10) at createVNodeWithArgsTransform (runtime-core.esm-bundler.js:6578:10) at createBlock (runtime-core.esm-bundler.js:6557:21) at Proxy.eval (button2.mjs:52:112) at renderComponentRoot (runtime-core.esm-bundler.js:5853:38)
后来更新elementUI后就可以正常使用了。更新指令如下：
cnpm update element-plus
天不生文心一言，我写代码如长夜。
主页先导入element提供的一个模板代码试试水，效果不错，甚至可以说是喜人，呈现出一个很规整的目录页面。
Tom
export default {
data(){
const item = {
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
};
return{
tableData: Array(20).fill(item),
msg:"hello",
}
},
}
.layout-container-demo .el-header {
position: relative;
background-color: var(--el-color-primary-light-7);
color: var(--el-text-color-primary);
}
.layout-container-demo .el-aside {
color: var(--el-text-color-primary);
background: var(--el-color-primary-light-8);
}
.layout-container-demo .el-menu {
border-right: none;
}
.layout-container-demo .el-main {
padding: 0;
}
.layout-container-demo .toolbar {
display: inline-flex;
align-items: center;
justify-content: center;
height: 100%;
right: 20px;
}
但是这样还是有点问题，至少长宽高上面会有点残缺，我做了如下调整：
今天先这样吧，element是一个新的尝试，确实是一个集成丰富的库，但也是问题多多，令人头痛。
到此这篇前端埋点实现（埋点前端vue）的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/46568.html