快速上手

 

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

• nPro-文档 (opens new window)

• mypUI-github (opens new window) 欢迎star

• mypUI-uniapp插件市场 (opens new window) 需要您的好评

• mypUI-文档开源 (opens new window)

• mypUI-文档地址 (opens new window)

• 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带来的高开发效率，可以用捐助来表示你的谢意 —— 就好像偶尔给我买杯咖啡 😃