vue中elementui怎么用，elementui 入门

什么是Element-ui？

据官网介绍，Element-ui是饿了么基于Vue 2.0为开发者、设计师、产品经理打造的一套桌面组件库。

官网：https://element.eleme.cn/#/zh-CN

如何使用？

1. 创建一个文件夹“element-ui”。

2. 下载组件。

npm install vue #安装Vuenpm i element-ui -S #安装Element-ui3 为了让你的代码更简洁，你可以将主要依赖包vue.min.js和element-ui包放在lib目录下。必须手动创建。

4. 构建您的第一个UI界面输入程序。

!DOCTYPE htmlhtml head meta charset=’UTF-8′ !– CSS import — link rel=’stylesheet’ href=’./lib/element-ui/lib/theme-chalk/index.css’/head body div id=’app’ !– 所有以el-开头的标签都是elementui的组件。 — el-button @click=’visible=true’Button/el-button el-dialog :visible.sync=’visible’ title=’Hello world’ pTry Element/p /el-dialog /div/body!– import Vue 在element 之前–script src=’./lib/vue.min.js’/script!– JavaScript import –script src=’./lib/element-ui/lib/index.js’/script script new Vue({ el: ‘#app’, data: function () { return {visible: false } } })/script /html官网基础组件测试

1. 即用型容器。

2. 图标。 el 有许多内置图标，可以使用icon=’iconname’ 属性来使用。我们还建议使用网站https://fontawesome.dashgame.com/中的图标。

el-button @click=’visible=true’ icon=’el-icon-search’Button/el-button

3. 如果您是后台程序员，您大部分时间都会与表单打交道。 el 几乎包含了开发中使用的所有内置表单组件。

前端怎么写？

对于一些后端开发人员来说，问题可能是他们不知道如何启动项目。原因如下：

没有明确的接口定义。我无法设计数据库。关于第一个问题，Element-ui组件通常可以看看其他网站是如何设计的并从中学习。

关于第二个问题，第一个问题其实并没有解决，所以写完前端之后，数据库的结构就变得更加自然了。一旦这两个问题得到解决，CRUD 就会留在后台。这是我们最了解的部分。

创建前端的基本例程：

您已经确定了足够的组件并将它们串在一起以形成网页的基本形状。只需更改CSS 即可。设计多级下拉菜单的联动效果

当您在第一个下拉框中选择不同的选项时，第二个下拉框中的下拉选项也会相应发生变化，如下图所示。在这种情况下，可以使用级联选择器（cascade）。为了达成这个。

div class=’block’ span class=’demonstration’ 默认点击触发子菜单/span el-cascader v-model=’value’ :options=’options’ @change=’handleChange’/el-cascader/divdiv class=’ block ‘span class=’演示’悬停触发子菜单/span el-cascader v-model=’value’ :options=’options’ :props='{ ExpandTrigger: ‘hover’ }’ @change=’handleChange’/el-cascader /div script export defaults { data() { return { value: [], options: [{ value: ‘zhinan’, label: ‘指南’, Children: [{ value: ‘设计源泽’, label: ‘设计原则’, Children: [{ value: ‘一智’ , label: ‘一致性’ }, { value: ‘饭葵’, label: ‘反馈’ }, { value: ‘小绿’, label: ‘效率’ }, { value: ‘科控’, label: ‘可控’ }] }, { value: ‘道行’ , label: ‘ Navigation’,children: [{ value: ‘ceyangdaohang’, label: ‘侧面导航’ }, { value: ‘dingbudaohang’, label: ‘顶部导航’ }] }] } } 所有前端弹窗中的图层组件我们建议您使用它。 达到。