对于大型公司项目平台选择jee的几层认识(四)

胁擦盗谡一、概述

?uView-Plus官网提供完整框架文档与资源下载?，是兼容多端开发的uni-app生态框架，支持安卓、iOS、微信小程序等10个平台。

uView-Plus官网及框架概述

?官网入口?：主文档站（uiadmin.net）|GitHub Pages（ijry.github.io）。

包含组件文档、工具库说明及快速体验模板入口??1??2

?核心特性?：

基于uView2.0升级，支持Vue3组合式API开发。??1

提供180+组件库，覆盖表单、布局、图表等场景。??3

mage

二、安装uview-plus

uview-plus是免费开源的，无需授权即可商用。

1.安装依赖

打开HBuilderX，新增终端标签卡

image

在项目根目录打开终端，执行

npm install uview-plus

npm install dayjs

npm install clipboard

2. 配置 main.js

在 main.js 中引入并使用 uview-plus：

复制代码

import App from './App.uvue'

import { createSSRApp } from 'vue'

import uviewPlus from 'uview-plus'

export function createApp() {

const app = createSSRApp(App)

app.use(uviewPlus)

return {

app

}

}

复制代码

3. 引入全局样式

在 uni.scss 中添加：

@import 'uview-plus/theme.scss';

最后一行，增加即可

在 App.vue 的

4. 配置 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. 测试使用

在页面中直接使用组件，例如：

测试按钮

这里，直接在index.uvue里面，增加一行，例如：

复制代码

{{title}}

测试按钮

复制代码

运行，效果如下：

image

三、编写登录页面

在pages目录，新建一个文件夹login，然后在login里面，新增文件login.uvue，内容如下：

复制代码

复制代码

编辑文件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 之后计划发版解决。

因此，那些警告信息可以忽略，不影响项目正常运行。