前端埋点实现（埋点前端vue）

由于本次项目不是学校的大作业之类的，因为一些其他因素，就不会像先前一样展示全部代码，而是以代码片段的形式去记录组件内容。

我认为本次项目构建分为三个模块，分别为页面设计、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提供的一个模板代码试试水，效果不错，甚至可以说是喜人，呈现出一个很规整的目录页面。

<el-container class="layout-container-demo" style="height: 100vh">

<el-aside width="200px" style="height: 100vh">

<el-scrollbar>

<el-menu :default-openeds="['1', '3']">

<el-sub-menu index="1">

<el-icon><message /></el-icon>Navigator One

</template>

<el-menu-item-group>

<template #title>Group 1</template>

<el-menu-item index="1-1">Option 1</el-menu-item>

<el-menu-item index="1-2">Option 2</el-menu-item>

</el-menu-item-group>

<el-menu-item-group title="Group 2">

<el-menu-item index="1-3">Option 3</el-menu-item>

</el-menu-item-group>

<el-sub-menu index="1-4">

<template #title>Option4</template>

<el-menu-item index="1-4-1">Option 4-1</el-menu-item>

</el-sub-menu>

<el-sub-menu index="2">

<el-icon><icon-menu /></el-icon>Navigator Two

</template>

<el-menu-item-group>

<template #title>Group 1</template>

<el-menu-item index="2-1">Option 1</el-menu-item>

<el-menu-item index="2-2">Option 2</el-menu-item>

</el-menu-item-group>

<el-menu-item-group title="Group 2">

<el-menu-item index="2-3">Option 3</el-menu-item>

</el-menu-item-group>

<el-sub-menu index="2-4">

<template #title>Option 4</template>

<el-menu-item index="2-4-1">Option 4-1</el-menu-item>

</el-sub-menu>

<el-sub-menu index="3">

<el-icon><setting /></el-icon>Navigator Three

</template>

<el-menu-item-group>

<template #title>Group 1</template>

<el-menu-item index="3-1">Option 1</el-menu-item>

<el-menu-item index="3-2">Option 2</el-menu-item>

</el-menu-item-group>

<el-menu-item-group title="Group 2">

<el-menu-item index="3-3">Option 3</el-menu-item>

</el-menu-item-group>

<el-sub-menu index="3-4">

<template #title>Option 4</template>

<el-menu-item index="3-4-1">Option 4-1</el-menu-item>

</el-sub-menu>

</el-menu>

</el-scrollbar>

</el-aside>

<el-container>

<el-header style="text-align: right; font-size: 12px">

<el-dropdown>

<el-icon style="margin-right: 8px; margin-top: 1px">

</el-icon>

<el-dropdown-menu>

<el-dropdown-item>View</el-dropdown-item>

<el-dropdown-item>Add</el-dropdown-item>

<el-dropdown-item>Delete</el-dropdown-item>

</el-dropdown-menu>

</template>

</el-dropdown>

</div>

</el-header>

<el-main>

<el-scrollbar>

<el-table :data="tableData">

<el-table-column prop="date" label="Date" width="250" />

<el-table-column prop="name" label="Name" width="250" />

<el-table-column prop="address" label="Address" />

</el-table>

</el-scrollbar>

</el-main>

</el-container>

</template>

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",

}

</script>

.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;

}

</style>

但是这样还是有点问题，至少长宽高上面会有点残缺，我做了如下调整：

<el-container class="layout-container-demo" style="height: 100vh">

今天先这样吧，element是一个新的尝试，确实是一个集成丰富的库，但也是问题多多，令人头痛。

前端埋点实现（埋点前端vue）

相关推荐