企业网站ui设计欣赏,做苗木网站,贵州省建设部网站,项目网站文章目录 vue后台管理系统从0到1搭建#xff08;4#xff09;各组件的搭建Main.vue 组件的初构 vue后台管理系统从0到1搭建#xff08;4#xff09;各组件的搭建 Main.vue 组件的初构
根据我们的效果来看#xff0c;分析一下#xff0c;我们把左边的区域分为一个组件4各组件的搭建Main.vue 组件的初构 vue后台管理系统从0到1搭建4各组件的搭建 Main.vue 组件的初构
根据我们的效果来看分析一下我们把左边的区域分为一个组件上面的header栏分为一个组件还有就是下面的主页 ok我们main组件的实现代码如下 Main.vue
script setup/scripttemplate
div classcommon-layoutel-container classlay-container
!-- 自定义左侧的组件--common-asideel-containerel-header classel-headercommon-header/common-header/el-headerel-mainL classright-mainmain/el-mainL/el-container/common-aside/el-container/div
/templatestyle
.common-layout,.lay-container{height: 100%;
}
.el-header{background-color: #333;
}
/style
重启项目这里会发现报错 我们尝试全部引入element组件貌似是我们的按需引入出现了问题注释掉按需引入的代码 在main.js中使用全部引入的方式 main.js
import { createApp } from vue
import App from ./App.vue
import /assets/less/index.less
import router from /router/index.js;import ElementPlus from element-plus
import element-plus/dist/index.cssconst app createApp(App)
app.use(ElementPlus)
app.use(router);
app.mount(#app);
在app.vue中删除多余的代码变成如下 App.vue
script/scripttemplateRouterView/RouterView/templatestyle scoped/style
重构Main.vue Main.vue
script setup
// 可以在这里添加组件的逻辑
/scripttemplatediv classcommon-layoutel-containerel-aside width200px classaside-container!-- 侧边栏内容 --common-aside/common-aside/el-asideel-containerel-header classel-headercommon-header/common-header/el-headerel-main classright-mainmain/el-main/el-container/el-container/div
/templatestyle
.common-layout,.lay-container{height: 100%;
}
.el-header{background-color: #333;
}
/style重启项目
如果是这样就好了。
