微网站开发项目合作协议,网站开发主管招聘,哪个网站设计素材多,做美术鉴赏网站的心得一个简单的在html中使用Vue3及Element-plus vue-icons的整合示例#xff1a;
一、示例截图 二、文件代码
直接复制到html文件在浏览器打开即可预览
!DOCTYPE html
html langen
headmeta charsetUTF-8title vue-icons的整合示例
一、示例截图 二、文件代码
直接复制到html文件在浏览器打开即可预览
!DOCTYPE html
html langen
headmeta charsetUTF-8titleHTML VUE ELEMENT/title!-- script src./cdn/http_unpkg.com_vue3.js/script--!-- script src./cdn/http_unpkg.com_element-plus.js/script--!-- link relstylesheet href./cdn/http_unpkg.com_element-plus_dist_index.css--!-- script src./cdn/http_unpkg.com_element-plus_icons-vue.js/script--link relstylesheet hrefhttps://unpkg.com/element-plus/dist/index.css /script srchttps://unpkg.com/vue3/scriptscript srchttps://unpkg.com/element-plus/scriptscript srchttps://unpkg.com/element-plus/icons-vue/script
/head
body
div idappel-container classlayout-container-demo styleheight: 98vhel-aside width200pxel-scrollbarel-menu :default-openeds[1, 3]el-sub-menu index1template #titleel-iconmessage/message/el-iconNavigator One/templateel-menu-item-grouptemplate #titleGroup 1/templateel-menu-item index1-1Option 1/el-menu-itemel-menu-item index1-2Option 2/el-menu-item/el-menu-item-groupel-menu-item-group titleGroup 2el-menu-item index1-3Option 3/el-menu-item/el-menu-item-groupel-sub-menu index1-4template #titleOption4/templateel-menu-item index1-4-1Option 4-1/el-menu-item/el-sub-menu/el-sub-menuel-sub-menu index2template #titleel-iconicon-menu/icon-menu/el-iconNavigator Two/templateel-menu-item-grouptemplate #titleGroup 1/templateel-menu-item index2-1Option 1/el-menu-itemel-menu-item index2-2Option 2/el-menu-item/el-menu-item-groupel-menu-item-group titleGroup 2el-menu-item index2-3Option 3/el-menu-item/el-menu-item-groupel-sub-menu index2-4template #titleOption 4/templateel-menu-item index2-4-1Option 4-1/el-menu-item/el-sub-menu/el-sub-menuel-sub-menu index3template #titleel-iconsetting/setting/el-iconNavigator Three/templateel-menu-item-grouptemplate #titleGroup 1/templateel-menu-item index3-1Option 1/el-menu-itemel-menu-item index3-2Option 2/el-menu-item/el-menu-item-groupel-menu-item-group titleGroup 2el-menu-item index3-3Option 3/el-menu-item/el-menu-item-groupel-sub-menu index3-4template #titleOption 4/templateel-menu-item index3-4-1Option 4-1/el-menu-item/el-sub-menu/el-sub-menu/el-menu/el-scrollbar/el-asideel-containerel-header styletext-align: right; font-size: 12pxdiv classtoolbarel-dropdownel-icon stylemargin-right: 8px; margin-top: 1pxsetting/setting/el-icontemplate #dropdownel-dropdown-menuel-dropdown-itemView/el-dropdown-itemel-dropdown-itemAdd/el-dropdown-itemel-dropdown-itemDelete/el-dropdown-item/el-dropdown-menu/template/el-dropdownspanTom/span/div/el-headerel-mainel-scrollbarel-table :datatableDatael-table-column propdate labelDate width140/el-table-columnel-table-column propname labelName width120/el-table-columnel-table-column propaddress labelAddress/el-table-column/el-table/el-scrollbar/el-main/el-container/el-container
/div
scriptconst {createApp, ref} Vue;const app createApp({setup() {const item {date: 2016-05-02,name: Tom,address: No. 189, Grove St, Los Angeles,}const tableData ref(Array.from({ length: 50 }).fill(item))return {item,tableData}}})app.component(loading, ElementPlusIconsVue.Loading)app.component(message, ElementPlusIconsVue.Message)app.component(setting, ElementPlusIconsVue.Setting)app.component(icon-menu, ElementPlusIconsVue.Menu)app.use(ElementPlus)app.mount(#app)
/script
style scoped.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
/body
/html
