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

本文介绍: 在PC端开发 uniapp，可以用elementUI，因为elementUI就是PC端的。5、在HbuilderX中，启动该项目，并且在浏览器中打开，就可以看到如下效果了。在使用 uniapp，选择 vue2.0时，实测可以用nodejs16的版本。1、新建 uniapp的默认模板（空白模板），创建时，选择。1、如果要支持微信小程序，那么可以尝试使用。中查找适合的ui 组件、ui 框架、开发模板。是无法跨多端使用的

文章 目录

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

在PC端开发 uniapp，可以用el em entUI，因为el em entUI就是PC端的。

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

使用 方法和步骤

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

2、安装 el ementUI

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

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

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

3、在main.js中导入 el ementUI

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

Vue.use(ElementUI);

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

比如，你可以复制如下代码到uniapp的pages/index/index.vue这个页面中，

<el-row&gt;
    <el-button&gt;默认按钮</el-button&gt;
    <el-button type="primary"&gt;主要按钮</el-button&gt;
    <el-button type="success"&gt;成功按钮</el-button&gt;
    <el-button type="info"&gt;信息按钮</el-button&gt;
    <el-button type="warning"&gt;警告按钮</el-button>
    <el-button type="danger">危险按钮</el-button>
</el-row>