海城网站制作建设企业网站建设因素分析

海城网站制作建设,企业网站建设因素分析,辽宁省建设厅官网,广州商城建网站渠道一、概述‌uView-Plus官网提供完整框架文档与资源下载‌#xff0c;是兼容多端开发的uni-app生态框架#xff0c;支持安卓、iOS、微信小程序等10个平台。uView-Plus官网及框架概述‌官网入口‌#xff1a;主文档站#xff08;uiadmin.net#xff09;|GitHub Pages#xf…一、概述‌uView-Plus官网提供完整框架文档与资源下载‌是兼容多端开发的uni-app生态框架支持安卓、iOS、微信小程序等10个平台。uView-Plus官网及框架概述‌官网入口‌主文档站uiadmin.net|GitHub Pagesijry.github.io。包含组件文档、工具库说明及快速体验模板入口‌‌1‌‌2‌核心特性‌基于uView2.0升级支持Vue3组合式API开发。‌‌1提供180组件库覆盖表单、布局、图表等场景。‌‌3集成网络请求、路由跳转等工具库。‌‌4‌多端兼容‌一次编写即可发布到Android、iOS、微信/QQ/支付宝小程序等10个平台H5适配度达95%‌‌官网地址https://uview-plus.jiangruyi.com/官网组件预览https://uview-plus.jiangruyi.com/h5/#/image二、安装uview-plusuview-plus是免费开源的无需授权即可商用。1.安装依赖打开HBuilderX新增终端标签卡image在项目根目录打开终端执行npm install uview-plusnpm install dayjsnpm install clipboard2. 配置 main.js在 main.js 中引入并使用 uview-plus复制代码import App from ./App.uvueimport { createSSRApp } from vueimport uviewPlus from uview-plusexport function createApp() {const app createSSRApp(App)app.use(uviewPlus)return {app}}复制代码3. 引入全局样式在 uni.scss 中添加import uview-plus/theme.scss;最后一行增加即可在 App.vue 的 style langscss 中添加import uview-plus/index.scss;App.vue默认没有scss最后一行增加以下代码style langscssimport uview-plus/index.scss;/style4. 配置 easycom 自动引入在 pages.json 中添加复制代码easycom: {autoscan: true,custom: {^u--(.*): uview-plus/components/u-$1/u-$1.vue,^up-(.*): uview-plus/components/u-$1/u-$1.vue,^u-([^-].*): uview-plus/components/u-$1/u-$1.vue}}复制代码最后几行增加即可5. 配置 manifest.json可选如开发微信小程序在 manifest.json 的源码视图中添加mp-weixin: {mergeVirtualHostAttributes: true}6. 重启 HBuilderX完成上述配置后重启 HBuilderX 使配置生效。7. 测试使用在页面中直接使用组件例如u-button typeprimary测试按钮/u-button这里直接在index.uvue里面增加一行例如复制代码templateviewimage classlogo src/static/logo.png/imagetext classtitle{{title}}/textu-button typeprimary测试按钮/u-button/view/template复制代码运行效果如下image三、编写登录页面在pages目录新建一个文件夹login然后在login里面新增文件login.uvue内容如下复制代码templateview class!-- 导航栏 --u-navbar title用户登录 /!-- 内容区 --view classcontent!-- 头像 --u-avatar :srclogo size80/u-avatar!-- 表单 --u--form :modelform labelPositionleftu--input v-modelform.username placeholder请输入用户名 prefixIconaccount /u--input v-modelform.password placeholder请输入密码 typepassword prefixIconlock //u--form!-- 按钮 --u-button text登录 typeprimary clicklogin :loadingloading /!-- 链接 --view classlinksu-cell title忘记密码 isLink clickgotoForget /u-cell title注册账号 isLink clickgotoRegister //view/view/view/templatescriptexport default {data() {return {title: Hello,logo: /static/logo.png,loading: false,form: {username: ,password: ,}}},onLoad() {},methods: {login() {if (!this.form.username) {uni.showToast({ title: 请输入用户名, icon: none })return}this.loading true// 模拟登录请求setTimeout(() {this.loading falseuni.showToast({ title: 登录成功 })}, 1500)},gotoForget() {uni.navigateTo({ url: /pages/forget/index })},gotoRegister() {uni.navigateTo({ url: /pages/register/index })}}}/scriptstyle scoped.content {padding: 40rpx;display: flex;flex-direction: column;align-items: center;}.links {margin-top: 30rpx;width: 100%;}/style复制代码编辑文件pages.json增加login路由复制代码pages: [ //pages数组中第一项表示应用启动页参考https://doc.dcloud.net.cn/uni-app-x/collocation/pagesjson.html{path: pages/index/index,style: {navigationBarTitleText: uni-app x}},{path: pages/login/login}]复制代码访问页面http://localhost:5173/#/pages/login/login效果如下image目前安装的uview-plus版本为3.6.4使用HBuilderX运行是会出现很多警告信息。这是因为uview-plus 的 SFC 代码里大量用了隐式的 this 成员在 uni-app x TS 严格模式 下被识别为 never于是直接拉进项目就会报 编译期类型警告但 运行期功能正常uview-plus 仓库已知晓 uni-app x 的 TS 严格模式问题3.3.8 之后计划发版解决。因此那些警告信息可以忽略不影响项目正常运行。