草庐IT

Element UI 应用精讲

小小福仔 2023-04-05 原文

本文是我在学习过程中记录学习的点点滴滴，目的是为了学完之后巩固一下顺便也和大家分享一下，日后忘记了也可以方便快速的复习。

Element UI 应用

前言

今天学习的主要是关于Element UI 的应用，快速上手Element UI 知识的理解和应用

一、Element 快速上手

1.1、Element 是什么

Element 是Element 团队提供的一套基于 Vue2.0 的组件库，可以快速搭建网站，提高开发效率。还有 ivew 也是基于 vue.js 的组件库，（类似于 BootStrap）有基于 PC 端和移动端的两套 UI。分别是ElementUI 和 MintUI
【element 参考 官网】https://element.eleme.cn/#/zh-CN
【ivew 官网】http://v1.iviewui.com/

1.2、Element2.13.1 快速上手

（1）通过 vue-cli 初始化一个项目
进入存放项目的根文件夹，打开 cmd 窗口，输入下面命令创建项目
第 1 个执行的命令：vue create vue-cli-element
具体可以参见上一章 vue-cli-demo1。
（2）安装 element UI 插件【我们采用的是@vue/cli4.x 版本，需要下面方法安装】
第 2 个执行的命令：cd vue-cli-element
第 3 个执行的命令：vue add element 或 npm i element-ui –S选择前面的，如果选择后面过程有点不一样哦【第四篇综合项目用】。
说明：安装好后会在 src 下生成/plugins/element.js，打开该 js文件，内容如下：
import Vue from ‘vue’
import Element from ‘element-ui’
import 'element-ui/lib/theme-chalk/index.css
Vue.use(Element)
（3）运行下项目
npm run serve
效果与上一章的 vue-cli-demo1 有点不同，如下:
（4）在入口文件 main.js 中引入 element-ui【全局引入】

import Vue from 'vue' 
import App from './App.vue' 
import './plugins/element.js' 
import ElementUI from 'element-ui' //element-ui 不能写错，是组件名称。这里引入的是 js 文件，还要单独引入 css 文件
import 'element-ui/lib/theme-chalk/index.css';//index.css 这个文件当然在项目下的相应目录下有的，如下图红色线框住
Vue.use(ElementUI);//指明使用 ElementUI
Vue.config.productionTip = false
new Vue({
render: h => h(App), }).$mount('#app')

通过以上4、5、6句黄色底纹代码实际上引入了 ElementUI 中的所有组件，这种方式简洁。但是实际开发中有时可能只要用到 ElementUI中的 1-2 个组件，而全部引入导致整个文件没有必要。因此也可以按需引入

至此，一个基于 Vue 和 Element 的开发环境已经搭建完毕，现在就可以编写代码测试各个组件了。下面讲解些主要的组件使用。
说明： 我们也可以单独建一个组件来使用这些 element UI. （1）在 componets 文件夹下新建组件 （2）在 App.vue 中使用组件。3 个步骤，导入、注册、使用。

二、Layout 布局

2.1、清理脚手架中组件原有内容

为了更好的演示效果，把 App.vue 和 HelloWorld.vue 组件
template 中的内容删除大部分，如下：
HelloWorld.vue 剩下如下代码:
<template>
<div class=“hello”>
<h1>{{ msg }}</h1>
</div>
</template>
App.vue 剩下如下代码
<template>
<div id=“app”>
<HelloWorld msg=“Welcome to Your Vue.js App”/>
</div>
</template>

2.2、Layout 布局示例

通过基础的 24 分栏，迅速简便地创建布局。
使用方法：选择需要的效果，然后单击显示代码，就会显示出相应的代码。

示例 1：效果

html 代码：1 行 4 列表

<el-row :gutter="20">
<el-col :span="6"><div class="grid-content
bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content
bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content
bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content
bg-purple"></div></el-col>
</el-row>

通过 row 和 col 组件，并通过 col 组件的 span 属性我们就
可以自由地组合布局【相当于宽度属性，总宽度为 24 份】。
gutter 属性来指定每一栏之间的间隔，默认间隔为 0

style 代码：

<style lang="less">/*<!--必须指定 lang="less"，如果报错则可能是没有安装 less less-loader，继续往下学习会教你如何安装-->*/
.el-row {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
}
.el-col {
border-radius: 4px;
}
.bg-purple-dark {
background: #99a9bf;
}
.bg-purple {
background: #d3dce6;
}
.bg-purple-light {
background: #e5e9f2;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
}
.row-bg {
padding: 10px 0;
background-color: #f9fafc;
}
</style>

2.3、使用动态 css——通过 less

总结：
4.X 版本的脚手架默认已经安装了，并配置好了相应 loader，如果不是应用这个脚手架先下载less和lessloader。
然后在<style lang=“less”></style>。中运用这个属性，这样就可以在css中定义变量、函数、Mixin了。然后要用的话就直接引用这些定义的就行了。

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、函数、Mixin(是一种简化代码的方法,能够提高代码的重复使用率)等特性，使 CSS 更易维护和扩展。通俗说采用了 less 语法，css可以使用变量、函数了。
【参考】http://lesscss.cn/
需要安装 less 和 less-loader 插件的支持，我们这个 4.X 版本的脚手架默认已经安装了，并配置好了相应 loader，若没有安装则执行下面命令：
npm install less less-loader -D
接下来可以使用 less 语法了，如上面的 style 中使用了，并且必须在 style 标签后指明 lang=“less”。 比如在 App.vue 中，上面的css代码改成如下:

<style lang="less">/*必须指定 lang="less"*/
……
.bg-purple {
background: @color;/*引用变量*/
.h(50px);
}
@color:#f00 /*定义变量*/
.h(@height){ /*此为定义函数，方法名前面以.开头*/
height:@height
}
...
</style>

最终运行效果如下：

定义在哪呢？比如我要定义 h1 中字体颜色也为红色，就可以使用变
量@color。
h1{
color:@color
}

三、Container 布局容器和 Color 色彩

3.1、Container 布局容器

用于布局的容器组件，方便快速搭建页面的基本结构：
<el-container> ： 外 层 容 器 。 当 子 元 素 中 包
含 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列。
<el-header>：顶栏容器。
<el-aside>：侧边栏容器。
<el-main>：主要区域容器。
<el-footer>：底栏容器。
以上组件采用了 flex 布局，使用前请确定目标浏览器是否容。
此外，<el-container> 的子元素只能是后四者，后四者的父元素也只能是 <el-container>

示例：

<template>
<div id="app">
<el-container>
<el-header>Header</el-header>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-container>
<el-main>Main</el-main>
<el-footer>Footer</el-footer>
</el-container>
</el-container>
</el-container>
</div>
</template>
<style>
/*css代码省略不写*/
</style>


具体代码见官网

3.2、Color 色彩

Element 为了避免视觉传达差异，使用一套特定的调色板来规定颜色，为你所搭建的产品提供一致的外观视觉感受。

3.2.1、主色

Element 主要品牌颜色是鲜艳、友好的蓝色。

3.2.2、 辅助色

除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。

3.2.3、中性色

中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。

四、Typography 字体和 Border 边框

4.1、Typography 字体

我们对字体进行统一规范，力求在各个操作系统下都有最佳展示效果。

4.1.1、字号

4.1.2、行高

4.1.3、Font-family 代码

font-family: "Helvetica Neue",Helvetica,"PingFang SC","HiraginoSans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;

4.2、Border 边框

我们对边框进行统一规范，可用于按钮、卡片、弹窗等组件里。

4.2.1、边框

4.2.2、圆角

4.2.3、投影

五、Icon 图标、按钮和 Link 文字链接

5.1、Icon 图标

提供了一套常用的图标集合。

5.1.1、使用方法

直接通过设置类名为图标的名称来使用即可。例如：


代码：

<i class="el-icon-edit"></i>
<i class="el-icon-share"></i>
<i class="el-icon-delete"></i>
<el-button type="primary" icon="el-icon-search"> 搜 索
</el-button>

5.1.2、图标集合（部分），全部的参见官网

5.2、Button 按钮

常用的操作按钮。

5.2.1、基础用法

使用 type、plain、round 和 circle 属性来定义 Button 的样

<el-row>
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
</el-row>
<el-row>
<el-button plain>朴素按钮</el-button>
<el-button type="primary" plain>主要按钮</el-button>
<el-button type="success" plain>成功按钮</el-button>
<el-button type="info" plain>信息按钮</el-button>
<el-button type="warning" plain>警告按钮</el-button>
<el-button type="danger" plain>危险按钮</el-button>
</el-row>
<el-row>
<el-button round>圆角按钮</el-button>
<el-button type="primary" round>主要按钮</el-button>
<el-button type="success" round>成功按钮</el-button>
<el-button type="info" round>信息按钮</el-button>
<el-button type="warning" round>警告按钮</el-button>
<el-button type="danger" round>危险按钮</el-button>
</el-row>
<el-row>
<el-button icon="el-icon-search" circle></el-button>
<el-button type="primary" icon="el-icon-edit"
circle></el-button>
<el-button type="success" icon="el-icon-check"
circle></el-button>
<el-button type="info" icon="el-icon-message"
circle></el-button>
<el-button type="warning" icon="el-icon-star-off"
circle></el-button>
<el-button type="danger" icon="el-icon-delete"
circle></el-button>
</el-row>

5.2.2、禁用状态

按钮不可用状态。
你可以使用 disabled 属性来定义按钮是否可用，它接受一个Boolean 值。

<el-row>
<el-button disabled>默认按钮</el-button>
<el-button type="primary" :disabled="false">主要按钮
</el-button>
<el-button type="success" disabled>成功按钮</el-button>
<el-button type="info" disabled>信息按钮</el-button>
<el-button type="warning" disabled>警告按钮</el-button>
<el-button type="danger" disabled>危险按钮</el-button>
</el-row>
<el-row>
<el-button plain disabled>朴素按钮</el-button>
<el-button type="primary" plain disabled>主要按钮</el-button>
<el-button type="success" plain disabled>成功按钮</el-button>
<el-button type="info" plain disabled>信息按钮</el-button>
<el-button type="warning" plain disabled>警告按钮</el-button>
<el-button type="danger" plain disabled>危险按钮</el-button>
</el-row>

5.2.3、文字按钮

<el-button type="text">文字按钮</el-button>
<el-button type="text" disabled>文字按钮</el-button>

5.2.4、图标按钮

带图标的按钮可增强辨识度（有文字）或节省空间（无文字）。
设置 icon 属性即可，icon 的列表可以参考 Element 的 icon
组件，也可以设置在文字右边的 icon ，只要使用 i 标签即可，可以使用自定义图标。

<el-button type="primary" icon="el-icon-edit"></el-button>
<el-button type="primary" icon="el-icon-share"></el-button>
<el-button type="primary" icon="el-icon-delete"></el-button>
<el-button type="primary" icon="el-icon-search">搜索</el-button>
<el-button type="primary"> 上 传 <i class="el-icon-upload
el-icon--right"></i></el-button>

5.2.5、按钮组

以按钮组的方式出现，常用于多项类似操作

使用<el-button-group>标签来嵌套你的按钮。

<el-button-group>
<el-button type="primary" icon="el-icon-arrow-left">上一页
</el-button>
<el-button type="primary">下一页<i class="el-icon-arrow-right
el-icon--right"></i></el-button>
</el-button-group>
<el-button-group>
<el-button type="primary" icon="el-icon-edit"></el-button>
<el-button type="primary" icon="el-icon-share"></el-button>
<el-button type="primary" icon="el-icon-delete"></el-button>
</el-button-group>

5.2.6、加载中

点击按钮后进行数据加载操作，在按钮上显示加载状态。

要设置为 loading 状态，只要设置 loading 属性为 true 即可。

<el-button type="primary" :loading="true">加载中</el-button>

5.2.7、不同尺寸

Button 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。

额外的尺寸：medium、small、mini，通过设置 size 属性来配置它们。

<el-row>
<el-button>默认按钮</el-button>
<el-button size="medium">中等按钮</el-button>
<el-button size="small">小型按钮</el-button>
<el-button size="mini">超小按钮</el-button>
</el-row>
<el-row>
<el-button round>默认按钮</el-button>
<el-button size="medium" round>中等按钮</el-button>
<el-button size="small" round>小型按钮</el-button>
<el-button size="mini" round>超小按钮</el-button>
</el-row>

5.3、Link 文字链接

文字超链接

5.3.1、基础用法

<el-link href="https://element.eleme.io" target="_blank">默认链
接</el-link>
<el-link type="primary">主要链接</el-link>
<el-link type="success">成功链接</el-link>
<el-link type="warning">警告链接</el-link>
<el-link type="danger">危险链接</el-link>
<el-link type="info">信息链接</el-link>

5.3.2、禁用状态

文字链接不可用状态。

<el-link disabled>默认链接</el-link>
<el-link type="primary" disabled>主要链接</el-link>
<el-link type="success" disabled>成功链接</el-link>
<el-link type="warning" disabled>警告链接</el-link>
<el-link type="danger" disabled>危险链接</el-link>
<el-link type="info" disabled>信息链接</el-link>

5.3.3、下划线

文字链接下划线。

<el-link :underline="false">无下划线</el-link>
<el-link>有下划线</el-link>

六、Radio 单选框和 Checkbox 多选框

6.1、Radio 单选框

在一组备选项中进行单选。

6.1.1、基础用法

由于选项默认可见，不宜过多，若选项过多，建议使用 Select 选择器。

要使用 Radio 组件，只需要设置 v-model 绑定变量，选中意
味着变量的值为相应 Radio label 属性的值，label 可以是 String、Number 或 Boolean。
主要代码就是黄色底纹的。
<template>
<div id=“app”>
{{radio}}
<el-radio v-model=“radio” label=“1”>备选项</el-radio>
<el-radio v-model=“radio” label=“2”>备选项</el-radio>
</div>
</template>
<script>
export default {
name: “App”,
data() {
return {
radio: ‘1’ };
}
};
</script>

6.1.2、禁用状态

单选框不可用的状态。

只要在 el-radio 元素中设置 disabled 属性即可，它接受一个Boolean，true 为禁用

<template>
<el-radio disabled v-model="radio" label="禁用">备选项
</el-radio>
<el-radio disabled v-model="radio" label="选中且禁用">备选项
</el-radio>
</template>
<script>
export default {
data () {
return {
radio: '选中且禁用'
};
}
}
</script>

6.1.3、单选框组

适用于在多个互斥的选项中选择的场景。

结合 el-radio-group 元素和子元素 el-radio 可以实现单选组，在 el-radio-group 中绑定 v-model，在 el-radio 中设置好 label 即可，无需再给每一个 el-radio 绑定变量，另外，还提供了 change事件来响应变化，它会传入一个参数 value

<template>
<el-radio-group v-model="radio">
<el-radio :label="3">备选项</el-radio>
<el-radio :label="6">备选项</el-radio>
<el-radio :label="9">备选项</el-radio>
</el-radio-group>
</template>
<script>
export default {
data () {
return {
radio: 3
};
}
}
</script>

6.1.4、按钮样式

6.1.5、带有边框

6.2、Checkbox 多选框

6.2.1、基础用法

单独使用可以表示两种状态之间的切换，写在标签中的内容为checkbox 按钮后的介绍

在 el-checkbox 元 素 中 定 义 v-model 绑 定 变 量 ， 单 一 的checkbox 中，默认绑定变量的值会是 Boolean，选中为 true。

<template>
<!-- `checked` 为 true 或 false -->
<el-checkbox v-model="checked">备选项</el-checkbox>
</template>
<script>
export default {
data() {
return {
checked: true
};
}
};
</script>

6.2.2、禁用状态

设置 disabled 属性即可

<template>
<el-checkbox v-model="checked1" disabled>备选项 1</el-checkbox>
<el-checkbox v-model="checked2" disabled>备选项</el-checkbox>
</template>
<script>
export default {
data() {
return {
checked1: false,
checked2: true
};
}
};
</script>

6.2.3、多选框组

6.2.4、indeterminate 状态

indeterminate属性用以表示 checkbox 的不确定状态，一般用于实现全选的效果

七、Input 输入框和 InputNumber 计数器

7.1、Input 输入框

通过鼠标或键盘输入字符

7.1.1、基础用法

<el-input v-model="input" placeholder="请输入内容"></el-input>
<script>
export default {
data() {
return {
input: ''
}
}
}
</script>

7.1.2、可清空

使用 clearable 属性即可得到一个可清空的输入框

<el-input
placeholder="请输入内容"
v-model="input"
clearable>
</el-input>
<script>
export default {
data() {
return {
input: ''
}
}
}
</script>

7.1.3、密码框

使用 show-password 属性即可得到一个可切换显示隐藏的密码框。

<el-input placeholder="请输入密码" v-model="input"
show-password></el-input>
<script>
export default {
data() {
return {
input: ''
}
}
}
</script>

7.1.4、带 icon 的输入框

带有图标标记输入类型

7.1.5、文本域

用于输入多行文本信息，通过将 type 属性的值指定为 textarea

<el-input
type="textarea"
:rows="2"
placeholder="请输入内容"
v-model="textarea">
</el-input>
<script>
export default {
data() {
return {
textarea: ''
}
}
}
</script>

7.2、InputNumber 计数器

仅允许输入标准的数字值，可定义范围。

7.2.1、基础用法

要使用它，只需要在 el-input-number 元素中使用 v-model 绑定变量即可，变量的初始值即为默认值。

<template>
<el-input-number v-model="num"
@change="handleChange" :min="1" :max="10" label="描述文字
"></el-input-number>
</template>
<script>
export default {
data() {
return {
num: 1
};
},
methods: {
handleChange(value) {
console.log(value);
}
}
};
</script>

7.2.2、禁用状态

disabled 属性接受一个 Boolean，设置为 true 即可禁用整个组件，如果你只需要控制数值在某一范围内，可以设置 min 属性和 max属性。

<template>
<el-input-number
v-model="num" :disabled="true"></el-input-number>
</template>
<script>
export default {
data() {
return {
num: 1
}
}
};
</script>

7.2.3、步数

允许定义递增递减的步数控制。
设置 step 属性可以控制步长，接受一个 Number

<template>
<el-input-number v-model="num" :step="2"></el-input-number>
</template>
<script>
export default {
data() {
return {
num: 5
}
}
};
</script>

7.2.4、按钮位置

设置 controls-position 属性可以控制按钮位置。

设置left是一左一右噢，设置right如上

<template>
<el-input-number v-model="num" controls-position="right"
@change="handleChange" :min="1" :max="10"></el-input-number>
</template>
<script>
export default {
data() {
return {
num: 1
};
},
methods: {
handleChange(value) {
console.log(value);
}
}
};
</script>

更多其他组件请看官网：
Element组件

💕 原 创 不 易 ， 还 希 望 各 位 大 佬 支 持 一 下 \textcolor{blue}{原创不易，还希望各位大佬支持一下} 原创不易，还希望各位大佬支持一下

👍 点 赞 ， 你 的 认 可 是 我 创 作 的 动 力 ！ \textcolor{orange}{点赞，你的认可是我创作的动力！} 点赞，你的认可是我创作的动力！

⭐ 收 藏 ， 你 的 青 睐 是 我 努 力 的 方 向 ！ \textcolor{red}{收藏，你的青睐是我努力的方向！} 收藏，你的青睐是我努力的方向！

🥕 评 论 ， 你 的 意 见 是 我 进 步 的 财 富 ！ \textcolor{green}{评论，你的意见是我进步的财富！} 评论，你的意见是我进步的财富！

精讲Elementspanclasstokenui$vue.js$elementui$element

有关Element UI 应用精讲的更多相关文章

  1. ruby - 将差异补丁应用于字符串/文件 - 2

    对于具有离线功能的智能手机应用程序，我正在为Xml文件创建单向文本同步。我希望我的服务器将增量/差异(例如GNU差异补丁)发送到目标设备。这是计划:Time=0Server:hasversion_1ofXmlfile(~800kiB)Client:hasversion_1ofXmlfile(~800kiB)Time=1Server:hasversion_1andversion_2ofXmlfile(each~800kiB)computesdeltaoftheseversions(=patch)(~10kiB)sendspatchtoClient(~10kiBtransferred)Cl

  2. ruby-on-rails - Rails 应用程序之间的通信 - 2

    我构建了两个需要相互通信和发送文件的Rails应用程序。例如，一个Rails应用程序会发送请求以查看其他应用程序数据库中的表。然后另一个应用程序将呈现该表的json并将其发回。我还希望一个应用程序将存储在其公共(public)目录中的文本文件发送到另一个应用程序的公共(public)目录。我从来没有做过这样的事情，所以我什至不知道从哪里开始。任何帮助，将不胜感激。谢谢! 最佳答案 无论Rails是什么，几乎所有Web应用程序都有您的要求，大多数现代Web应用程序都需要相互通信。但是有一个小小的理解需要你坚持下去，网站不应直接访问彼此

  3. ruby - 无法运行 Rails 2.x 应用程序 - 2

    我尝试运行2.x应用程序。我使用rvm并为此应用程序设置其他版本的ruby​​:$rvmuseree-1.8.7-head我尝试运行服务器，然后出现很多错误:$script/serverNOTE:Gem.source_indexisdeprecated,useSpecification.Itwillberemovedonorafter2011-11-01.Gem.source_indexcalledfrom/Users/serg/rails_projects_terminal/work_proj/spohelp/config/../vendor/rails/railties/lib/r

  4. ruby-on-rails - Rails 应用程序中的 Rails : How are you using application_controller. rb 是新手吗？ - 2

    刚入门rails，开始慢慢理解。有人可以解释或给我一些关于在application_controller中编码的好处或时间和原因的想法吗？有哪些用例。您如何为Rails应用程序使用应用程序Controller？我不想在那里放太多代码，因为据我了解，每个请求都会调用此Controller。这是真的？ 最佳答案 ApplicationController实际上是您应用程序中的每个其他Controller都将从中继承的类(尽管这不是强制性的)。我同意不要用太多代码弄乱它并保持干净整洁的态度，尽管在某些情况下ApplicationContr

  5. ruby-on-rails - 如何在我的 Rails 应用程序 View 中打印 ruby​​ 变量的内容？ - 2

    我是一个Rails初学者，但我想从我的RailsView(html.haml文件)中查看Ruby变量的内容。我试图在ruby​​中打印出变量(认为它会在终端中出现)，但没有得到任何结果。有什么建议吗？我知道Rails调试器，但更喜欢使用inspect来打印我的变量。 最佳答案 您可以在View中使用puts方法将信息输出到服务器控制台。您应该能够在View中的任何位置使用Haml执行以下操作:-puts@my_variable.inspect 关于ruby-on-rails-如何在我的R

  6. ruby-on-rails - 如何在 Gem 中获取 Rails 应用程序的根目录 - 2

    是否可以在应用程序中包含的gem代码中知道应用程序的Rails文件系统根目录？这是gem来源的示例:moduleMyGemdefself.included(base)putsRails.root#returnnilendendActionController::Base.send:include,MyGem谢谢，抱歉我的英语不好 最佳答案 我发现解决类似问题的解决方案是使用railtie初始化程序包含我的模块。所以，在你的/lib/mygem/railtie.rbmoduleMyGemclassRailtie使用此代码，您的模块将在

  7. 世界前沿3D开发引擎HOOPS全面讲解——集3D数据读取、3D图形渲染、3D数据发布于一体的全新3D应用开发工具 - 2

    无论您是想搭建桌面端、WEB端或者移动端APP应用，HOOPSPlatform组件都可以为您提供弹性的3D集成架构，同时，由工业领域3D技术专家组成的HOOPS技术团队也能为您提供技术支持服务。如果您的客户期望有一种在多个平台（桌面/WEB/APP，而且某些客户端是“瘦”客户端）快速、方便地将数据接入到3D应用系统的解决方案，并且当访问数据时，在各个平台上的性能和用户体验保持一致，HOOPSPlatform将帮助您完成。利用HOOPSPlatform，您可以开发在任何环境下的3D基础应用架构。HOOPSPlatform可以帮您打造3D创新型产品，HOOPSSDK包含的技术有：快速且准确的CAD

  8. 叮咚买菜基于 Apache Doris 统一 OLAP 引擎的应用实践 - 2

    导读：随着叮咚买菜业务的发展，不同的业务场景对数据分析提出了不同的需求，他们希望引入一款实时OLAP数据库，构建一个灵活的多维实时查询和分析的平台，统一数据的接入和查询方案，解决各业务线对数据高效实时查询和精细化运营的需求。经过调研选型，最终引入ApacheDoris作为最终的OLAP分析引擎，Doris作为核心的OLAP引擎支持复杂地分析操作、提供多维的数据视图，在叮咚买菜数十个业务场景中广泛应用。作者｜叮咚买菜资深数据工程师韩青叮咚买菜创立于2017年5月，是一家专注美好食物的创业公司。叮咚买菜专注吃的事业，为满足更多人“想吃什么”而努力，通过美好食材的供应、美好滋味的开发以及美食品牌的孵

  9. 【鸿蒙应用开发系列】- 获取系统设备信息以及版本API兼容调用方式 - 2

    在应用开发中，有时候我们需要获取系统的设备信息，用于数据上报和行为分析。那在鸿蒙系统中，我们应该怎么去获取设备的系统信息呢，比如说获取手机的系统版本号、手机的制造商、手机型号等数据。1、获取方式这里分为两种情况，一种是设备信息的获取，一种是系统信息的获取。1.1、获取设备信息获取设备信息，鸿蒙的SDK包为我们提供了DeviceInfo类，通过该类的一些静态方法，可以获取设备信息，DeviceInfo类的包路径为：ohos.system.DeviceInfo.具体的方法如下：ModifierandTypeMethodDescriptionstatic StringgetAbiList​()Obt

  10. ruby-on-rails - 从应用程序中自定义文件夹内的命名空间自动加载 - 2

    我们目前正在为ROR3.2开发自定义cms引擎。在这个过程中，我们希望成为我们的rails应用程序中的一等公民的几个类类型起源，这意味着它们应该驻留在应用程序的app文件夹下，它是插件。目前我们有以下类型:数据源数据类型查看我在app文件夹下创建了多个目录来保存这些:应用/数据源应用/数据类型应用/View更多类型将随之而来，我有点担心应用程序文件夹被这么多目录污染。因此，我想将它们移动到一个子目录/模块中，该子目录/模块包含cms定义的所有类型。所有类都应位于MyCms命名空间内，目录布局应如下所示:应用程序/my_cms/data_source应用程序/my_cms/data_ty

随机推荐