uniapp是否可以用elementUI等前端UI库、使用步骤以及需要注意的问题

uniapp是否可以用elementUI等前端UI库

在PC端开发uniapp,可以用elementUI,因为elementUI就是PC端的。

在使用uniapp,选择vue2.0时,实测可以用nodejs16的版本。

使用方法和步骤

1、新建uniapp的默认模板(空白模板),创建时,选择vue2的模板(默认),如果是vue3,可以用element plus版本

2、安装elementUI

在项目根目录下运行如下指令

# 该指令安装后,自动会写入到package.json的dependencies中,所以,不需要加 -S
npm install element-ui

如果项目没有package.json。它会自动创建一个

3、在main.js中导入elementUI

// 引入elementUI开发
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

4、接下来就可以通过查阅elementUI官网,将该组件代码复制到uniapp的页面或组件中使用了。

比如,你可以复制如下代码到uniapppages/index/index.vue这个页面中,

<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>

5、在HbuilderX中,启动该项目,并且在浏览器中打开,就可以看到如下效果了

image-20231201164125240

渲染出来的效果,可以看到uniapp并没有将elementUI的组件转为uni-view等标签。

问题

前文也已经说了,如果你在uniapp中使用了elementUI,是无法跨多端使用的,比如在微信小程序无法使用,会报错。

所以本方案,只适用于使用uniapp进行开发学习或只开发PC端的项目,但是这样就没有意义了。

如何解决

1、如果要支持微信小程序,那么可以尝试使用vantweapp版本。

2、到uniapp插件市场中查找适合的ui组件、ui框架、开发模板

如果你在web前端开发、面试、前端学习路线有困难可以加我V:imqdcnn。免费答疑,行业深潜多年的技术牛人帮你解决bug。

祝你能成为一名优秀的WEB前端开发工程师!

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2023-12-08 17:46:04       91 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2023-12-08 17:46:04       97 阅读
  3. 在Django里面运行非项目文件

    2023-12-08 17:46:04       78 阅读
  4. Python语言-面向对象

    2023-12-08 17:46:04       88 阅读

热门阅读

  1. Golang分布式事务

    2023-12-08 17:46:04       53 阅读
  2. K8S 工具收集

    2023-12-08 17:46:04       80 阅读
  3. Fiddler抓包测试

    2023-12-08 17:46:04       60 阅读
  4. Vue+ElementUI实现输入框日期框下拉框动态展示

    2023-12-08 17:46:04       60 阅读
  5. 常用的git版本控制有哪些工具或网站呢?

    2023-12-08 17:46:04       73 阅读