合肥市建设通网站,网站核验单,wordpress文章上的图片显示不出来,动态列线图怎么制作网页uniapp的强大是非常震撼的#xff0c;一套代码可以编写到十几个平台。这个可以在官网上进行查询uni-app官网。主要还是开发小型的软件系统#xff0c;使用起来非常的方便、快捷、高效。
uniapp中有很多自带的UI#xff0c;在创建项目的时候#xff0c;就可以自由选择。而E… uniapp的强大是非常震撼的一套代码可以编写到十几个平台。这个可以在官网上进行查询uni-app官网。主要还是开发小型的软件系统使用起来非常的方便、快捷、高效。
uniapp中有很多自带的UI在创建项目的时候就可以自由选择。而EelementPlus是一个前端的框架主要是开发web的其实他们是可以放在一起使用的因为都是基于vue.js的。
1.使用uniapp创建一个最简单的项目
本案例使用的是vue3进行演示 2.修改index.vue的代码
简单写一点uniapp原生的风格 3.启动效果
PC网页效果 手机效果 4.安装使用element-plus
npm install element-plus --save
安装完成的标志 5.在main.js中进行修改
// #ifndef VUE3
import Vue from vue
import App from ./AppVue.config.productionTip falseApp.mpType appconst app new Vue({...App
})
app.$mount()
// #endif// #ifdef VUE3
import {createSSRApp
} from vue
import App from ./App.vue
import ElementPlus from element-plus
import element-plus/dist/index.css
export function createApp() {const app createSSRApp(App)app.use(ElementPlus)return {app}
}
// #endif
关键就三句话 6.在index.vue中修改代码 7.效果对比
PC网页效果 手机效果 对比可见颜色的主题还是不一样的此时我们就完成了在uniapp中使用element-plus的操作。
8.对于不同的平台界面显示不同的控件
比如手机上打开的话我们只显示原生的uniapp控件电脑端打开的话我们就显示element-plus的控件
这样我们就需要修改index.vue的代码
采用vue3的setup语法
templateview classcontainerbutton v-show!isShow typeprimary stylemargin-right: 20rpx; sizemini我是原生uniapp按钮/buttonbutton v-show!isShow typeprimary stylemargin-right: 20rpx; sizemini我是原生uniapp按钮/buttonbutton v-show!isShow typeprimary stylemargin-right: 20rpx; sizemini我是原生uniapp按钮/buttonel-button v-showisShow typeprimary我是element-plus按钮/el-buttonel-button v-showisShow typeprimary我是element-plus按钮/el-button/view
/templatescript setupimport {onLoad} from dcloudio/uni-appimport {ref} from vueconst isShow ref(false)onLoad(() {console.log(uni.getSystemInfoSync().platform)if (uni.getSystemInfoSync().platform windows) {isShow.value true}})
/scriptstyle.container {padding: 20px;font-size: 14px;line-height: 24px;}
/style
9.不同平台的效果对比 PC网页效果 手机效果 有了上面的操作今后我们进行开发时移动和网页的混合开发就非常的方便加上权限控制想怎么显示就怎么显示了。
本文源码
https://download.csdn.net/download/u012563853/88808938
来源
uniapp中使用EelementPlus-CSDN博客
