网站开发排行榜,京东商家入驻入口官网,市场监督管理局投诉举报管理办法,德国网站后缀Vue配置Element UI框架 目录一、 概要二、 开发前准备1. 搭建Vue框架 三、 安装 Element UI1. 引入 Element UI 依赖2. 在 main.js 中引入 Element UI 和相关样式#xff1a;3. 按需引入(非必须, 可忽略)4. 简单构建一个主页面 目录
一、 概要 Element UI 是一个基于 Vue.js … Vue配置Element UI框架 目录一、 概要二、 开发前准备1. 搭建Vue框架 三、 安装 Element UI1. 引入 Element UI 依赖2. 在 main.js 中引入 Element UI 和相关样式3. 按需引入(非必须, 可忽略)4. 简单构建一个主页面 目录
一、 概要 Element UI 是一个基于 Vue.js 的前端 UI 框架提供了一套优雅的组件库和丰富的功能用于快速搭建现代化的 Web 应用程序。Element UI 的设计灵感来源于 Google Material Design 和 Apple 的 Human Interface Guidelines具有简洁明了的风格和丰富的组件包括按钮、表单、弹窗、导航菜单、表格等常用组件同时支持自定义主题和国际化。Element UI 的特点包括易用性、美观性和扩展性广泛应用于各种 Web 项目中。 官方网址: Element 二、 开发前准备
1. 搭建Vue框架
Vue框架搭建详细参考这篇文章
5.9 使用Vue CLI创建VUE项目
vue create element_democd element_demonpm run serve 三、 安装 Element UI
1. 引入 Element UI 依赖 可以通过 npm 或者 yarn 安装 Element UI npm install element-ui #或者 yarn add element-ui # 终端键入
npm install element-ui --save
安装后package.json会同步追加element-ui依赖。
代码比较
2. 在 main.js 中引入 Element UI 和相关样式 \element_demo\src\main.js import Vue from vue
import App from ./App.vue
import ./registerServiceWorker
import ElementUI from element-ui;
import element-ui/lib/theme-chalk/index.css;Vue.config.productionTip falseVue.use(ElementUI);new Vue({render: h h(App),
}).$mount(#app) 代码比较
3. 按需引入(非必须, 可忽略) 借助 babel-plugin-component我们可以只引入需要的组件以达到减小项目体积的目的。 babel-plugin-component 是一个 Babel 插件用于按需引入 Vue.js 组件库比如 Element UI、Ant Design Vue 等。这个插件可以帮助你在使用 Vue.js 组件库时只引入你实际需要的组件而不是全部组件从而减小最终打包生成的文件大小。 当你使用 babel-plugin-component 时你可以在代码中按需引入组件而不需要手动引入每个组件。这样可以提高项目的性能并减小最终打包文件的体积。 举个例子假设你使用 Element UI并且只需要引入 Button 和 Input 组件你可以这样配置 babel-plugin-component
# 使用 npm 安装 babel-plugin-component
npm install babel-plugin-component --save
# 或者使用 yarn 安装
yarn add babel-plugin-component
在 babel.config.js 中添加如下配置 \element_demo\babel.config.js // babel.config.js
module.exports {plugins: [[component,{libraryName: element-ui,styleLibraryName: theme-chalk,// 引入需要的组件components: [Button, Input]}]]
};在 Vue 组件的模板中使用 ‘Button’ 和 ‘Input’ 组件 无需在脚本部分额外引入 Element UI 的 Button 和 Input 组件因为这些组件已经被按需引入并注册到全局。 templatediv!-- 使用 Button 组件 --el-button typeprimaryPrimary Button/el-button!-- 使用 Input 组件 --el-input placeholder请输入内容/el-input/div
/templatescript
// 由于已经按需引入组件此处无需再单独引入 Element UI 的 Button 和 Input 组件
export default {name: MyComponent
};
/script
以上步骤可参照官方文档 快速上手
4. 简单构建一个主页面 \element_demo\src\App.vue templatediv idappHelloWorld //div
/templatescript
import HelloWorld from ./components/HelloWorld.vue;export default {name: App,components: {HelloWorld,},
};
/scriptstyle
body {height: 100vh; /* 设置高度为视口高度 *//* 100vh 是 CSS 中的一个长度单位表示视口Viewport的高度。具体来说1vh 等于视口高度的 1%。因此100vh 就等于视口的整个高度。这个单位通常用于确保元素的高度始终占据整个视口高度从而实现全屏效果。 */overflow: hidden; /* 隐藏滚动条 */
}
/style 代码比较 \element_demo\src\components\HelloWorld.vue templateel-container styleheight: 100vh; border: 1px solid #eeeel-aside width200px stylebackground-color: rgb(238, 241, 246)el-menu :default-openeds[1, 3]el-submenu index1template slottitlei classel-icon-message/i导航一/templateel-menu-item-grouptemplate slottitle分组一/templateel-menu-item index1-1选项1/el-menu-itemel-menu-item index1-2选项2/el-menu-item/el-menu-item-groupel-menu-item-group title分组2el-menu-item index1-3选项3/el-menu-item/el-menu-item-groupel-submenu index1-4template slottitle选项4/templateel-menu-item index1-4-1选项4-1/el-menu-item/el-submenu/el-submenuel-submenu index2template slottitlei classel-icon-menu/i导航二/templateel-menu-item-grouptemplate slottitle分组一/templateel-menu-item index2-1选项1/el-menu-itemel-menu-item index2-2选项2/el-menu-item/el-menu-item-groupel-menu-item-group title分组2el-menu-item index2-3选项3/el-menu-item/el-menu-item-groupel-submenu index2-4template slottitle选项4/templateel-menu-item index2-4-1选项4-1/el-menu-item/el-submenu/el-submenuel-submenu index3template slottitlei classel-icon-setting/i导航三/templateel-menu-item-grouptemplate slottitle分组一/templateel-menu-item index3-1选项1/el-menu-itemel-menu-item index3-2选项2/el-menu-item/el-menu-item-groupel-menu-item-group title分组2el-menu-item index3-3选项3/el-menu-item/el-menu-item-groupel-submenu index3-4template slottitle选项4/templateel-menu-item index3-4-1选项4-1/el-menu-item/el-submenu/el-submenu/el-menu/el-asideel-containerel-header styletext-align: right; font-size: 12pxel-dropdowni classel-icon-setting stylemargin-right: 15px/iel-dropdown-menu slotdropdownel-dropdown-item查看/el-dropdown-itemel-dropdown-item新增/el-dropdown-itemel-dropdown-item删除/el-dropdown-item/el-dropdown-menu/el-dropdownspanibun.song/span/el-headerel-mainel-table :datatableDatael-table-column propdate label日期 width140/el-table-columnel-table-column propname label姓名 width120/el-table-columnel-table-column propaddress label地址 /el-table-column/el-table/el-main/el-container/el-container
/templatescript
export default {name: HelloWorld,props: {msg: String,},data() {const item {date: 9999-12-12,name: ibun.song,address: 上海市普陀区金沙江路 1518 弄,};return {tableData: Array(15).fill(item),};},
};
/script!-- Add scoped attribute to limit CSS to this component only --
style scoped
.el-header {background-color: #b3c0d1;color: #333;line-height: 60px;
}.el-aside {color: #333;
}
/style 代码比较 以上步骤可参照官方文档 Container 布局容器
