网站建设方案大全,58同城最新招聘网,上海网站建设套餐,wordpress禁用谷歌字体解决加载慢方法文章目录 uniapp是否可以用elementUI等前端UI库使用方法和步骤问题如何解决 uniapp是否可以用elementUI等前端UI库
在PC端开发uniapp#xff0c;可以用elementUI#xff0c;因为elementUI就是PC端的。 在使用uniapp#xff0c;选择vue2.0时#xff0c;实测可以用nodejs16的… 文章目录 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的页面或组件中使用了。
比如你可以复制如下代码到uniapp的pages/index/index.vue这个页面中
el-rowel-button默认按钮/el-buttonel-button typeprimary主要按钮/el-buttonel-button typesuccess成功按钮/el-buttonel-button typeinfo信息按钮/el-buttonel-button typewarning警告按钮/el-buttonel-button typedanger危险按钮/el-button
/el-row5、在HbuilderX中启动该项目并且在浏览器中打开就可以看到如下效果了 渲染出来的效果可以看到uniapp并没有将elementUI的组件转为uni-view等标签。
问题
前文也已经说了如果你在uniapp中使用了elementUI是无法跨多端使用的比如在微信小程序无法使用会报错。
所以本方案只适用于使用uniapp进行开发学习或只开发PC端的项目但是这样就没有意义了。
如何解决
1、如果要支持微信小程序那么可以尝试使用vant的weapp版本。
2、到uniapp插件市场中查找适合的ui组件、ui框架、开发模板
如果你在web前端开发、面试、前端学习路线有困难可以加我Vimqdcnn。免费答疑行业深潜多年的技术牛人帮你解决bug。
祝你能成为一名优秀的WEB前端开发工程师
