nPro-nvue全端组件与模版库
基于nvue的全端组件与模版库,支持编译到所有APP/小程序/H5
规范
主题/单位可配置,接口/字段命名统一,熟悉一个就是掌握所有!
灵活
大量开放的props,可以在快速开发与灵活运用之间自由畅想。
高效
针对各端优化。统一的命名规范。越用越快,越用越好。
快速上手 #
nPro
是基于uniapp/weex的一套组件库与工具集,可以高效且规范地开发出uniapp支持的各端应用(APP/各家小程序/H5/快应用)。
兼容nvue页面和vue页面。nvue页面对应的app端依托weex编译为原生,具备良好的性能与体验。
nPro
从学习成本、开发经验,以及记忆成本、性能优化、包体积等多方面考虑,不断优化,已经是一个非常优秀的框架,绝对能为您带来稳定、高效、规范的开发体验。
再说,作者经历过 Objective-c
swift
Python
go
Javascript
等多语言开发,前后台都有涉及,绝对有信心和能力维护好一套优秀的组件,也不允许自己使用一套不规范的UI。
nPro
从nvue开发的规范出发,所有组件都可用于nvue,完全兼容vue,并针对优化。让您一次开发,不仅拥有多端,而且具备更高性能!
拷贝UI组件 #
直接将nPro
放在您的uniapp项目根目录下。
复制UI的静态资源 #
在制作nPro
的时候,我们用到了3个小小的加载图标。我们放在了组件库nPro
文件夹下/_static/ui
中,所以需要拷贝到您自己的项目下(把图标放到您项目中的/static/ui
下)。
静态文件的路径依然保持和示范项目中一致即可,也就是依然是 /static/ui
路径。
使css生效 #
为了减少包体积和复用,UI内使用了 全局css
。您需要在app.vue
里面引入nPro
中的 base.scss
。
也就是:
<style lang="scss">
@import '@/nPro/base.scss';
</style>
因为使用了 scss变量
,记得设置 style
的 lang="scss"
。
具体的scss变量的引入以及自定义和规范,请看文档:主题 以及 设计。
配置 easycom
#
UI内部使用了easycom
来帮您自动注册组件,没有用到的组件不会打包。请确认您在项目中开启了easycom
。
在 pages.json
中添加如下代码:
"easycom": {
"autoscan": true,
"custom": {
"^n-(.*)": "@/nPro/$1/$1.vue" // 匹配nPro内的vue文件
}
}
定义您的UI主题 #
nPro
下的var.scss
是主题scss变量
定义文件。您可能有订制它的需求。
我们不建议您直接修改var.scss
,您只需要把var.scss
中的变量复制粘贴到uni.scss
中,然后就可以随心所欲的修改变量值了(当然,你不能删除掉 uni.scss
,不然是会报错的)。
如果主题内定义的变量无法满足您的要求,您还可以在uni.scss
里面进行添加,然后新增一个相应的class
文件即可,并在app.vue
下引入。
关于主题的具体说明与使用,请查阅 主题。
在uni.scss
中定义了的变量,您可以在项目里的任何地方直接使用,不需要再次引入。
是否锁定屏幕 #
我们建议您锁定屏幕。
app.vue
中设置如下:
onLaunch: function() {
// #ifdef APP-PLUS
plus.screen.lockOrientation('portrait-primary'); //锁定屏幕
// #endif
}
pages.json
中可以设置 globalStyle
:
"globalStyle": {
"pageOrientation": "portrait"
}
现在开始愉快的使用吧 #
自由且无需手动导入nPro
的使用方式,正式开始。
祝您使用愉快。
如果在使用的过程中,您发现有任何不如意或者bug存在,敬请联系我们,或者给出您的宝贵意见。当然,您也可以给出您的实现方式。或者给我们提一个 pr (opens new window)
找到代码与我们 #
nPro (opens new window) uniapp插件市场,欢迎好评与star
mypUI npm地址:https://www.npmjs.com/package/@mypui/myp-ui (opens new window)
购买
nPro
联系作者wx:pptpdf
作者qq:
382006503
欢迎加入wx群和qq群。wx群请加wx,qq群请加qq群号:
306797275
强烈建议加入wx与qq群,获取更多
nPro
的动态与帮助
快速体验 #
想了解我们是怎么使用
nPro
的吗?又如何对nPro
有一个更加全面的了解?或者说站在一个代码设计者的角度去了解nPro
? 纵观全局,对你更加高效的使用nPro
非常有用。建议您一定要看看。
您可以配合nPro
的示范代码来做更加深入的理解。
赞助 #
如果您觉得nPro对您的帮助很大,极大的节省了您的时间和成本,或者您的项目有了不错的收入,您可以考虑赞助一下作者:
一次性赞助 #
周期性赞助 #
周期性赞助可以获得额外的回报,比如你的名字会出现在nPro赞助者名单中,再比如你的公司logo,或者项目链接会出现在我们的官网上。
如果你是企业经营者并且将nPro用在商业产品中,那么赞助nPro有商业上的益处:可以让你的产品所依赖的框架保持健康并得到积极的维护,也能帮助你在nPro/uniapp社区里获得更高的曝光度。
如果你是个人开发者并且享受nPro带来的高开发效率,可以用捐助来表示你的谢意 —— 就好像偶尔给我买杯咖啡 😃