uniapp, Vue小白入门学习笔记- Vue.use,Vue.prototype,app.$mount(),px, upx ,rpx 区别

2,503 阅读2分钟

这是我参与8月更文挑战的第1天,活动详情查看:8月更文挑战

Vue 学习 小白入门笔记

Vue.use(Element)

注册组件;使用 element时会先import,再Vue.use()一下,实际上就是注册组件,触发 install 方法;

Vue.use(VueRouter)、Vue.use(MintUI)

源码:

// 这里的plugin参数就是,就是我们通过Vue.use(uView)引入的"uView"
Vue.use = function (plugin: Function | Object) {
    
	// ......
	
	const args = toArray(arguments, 1)
	// 这一句很重要,这里的this,就是Vue,把他添加到args数组的第一个元素
	args.unshift(this)
	// 判断我们传递进来的"uView",也即这里的"plugin"内部是否有一个叫"install"的方法
	// 如果有,就执行我们的"uView",也即"plugin.install"方法
    if (typeof plugin.install === 'function') {
      plugin.install.apply(plugin, args)
    } else if (typeof plugin === 'function') {
      plugin.apply(null, args)
    }
	
	// ......
}

Vue的use方法内部,接受了uView这个插件,并判断uView内部是否有一个叫install的方法,如果有,就执行它,并且 通过apply方法把数组当做参数传递进去(这里数组内部第一个元素Vue这个对象,见上方注释,apply可以把数组[arg1, agr2]形式拆成(arg1, agr2)的形式)

Vue.prototype

需要在多个组件都想用到的配置或者数据,可以在Vue原型对象上定义为全局对象,在后面的Vue实例都能访问到;

定义

Vue.prototype.$appName = 'My App' 

访问

this.$appName

new Vue({
  beforeCreate: function () {
    console.log(this.$appName)
  }
})

appName前面的 $ 开头是为什么?

避免和局部Vue对象产生定义冲突,以$开头表明是:全局访问对象

访问的时候一定加 this , this 代表的是当前的vue实例对象;

一般用法
import * as Common from './config/common.js'
Vue.prototype.$common = Common; // 注册通用方法

//axios
Vue.prototype.$axios = axios

import getTime from './utils/getTime';
Vue.prototype.$myUtils = getTime;
//使用
this.$myUtils.dateformat(),

// loading
Vue.prototype.$loading = Loading.service;

Vue.config

Vue.config 是一个对象,包含 Vue 的全局配置。可以在启动应用之前修改下列 property:

Vue.config.silent = true //取消 Vue 所有的日志与警告。

...App 是啥语法

const app = new Vue({
  ...App
})

app.$mount()

手动挂载操作

$mount如果不带任何参数的话,是需要在后续使用document.xxx这样的方法来定义挂载节点的

   beforeMount: function appBeforeMount () {
      // TODO 平台代码
      this.$el = document.getElementById('app')
    },

px, upx ,rpx 区别

在web中,常用的是pxrem等单位,rem在uniapp中不推荐使用

web中: 可以使用px,它属于静态单位,它的最终呈现尺寸不会和屏幕尺寸有关系

px属于静态单位,uni中还有upxrpx单位,upx为uniapp成立之初的动态单位,后来各家小程序跟随微信小程序,都使用 rpx单位,使它成为了既定的事实标准,uniapp也就提倡并官宣使用rpx单位,但是upx也一样能使用,和rpx效果相同。 另外:uniapp,vh和vw也完全可以使用的,一般我们需要让某个元素高度铺满整个屏幕时,可以设置高度为100vh

建议:开发中,只需谨记两个单位,pxrpx,一般情况下,我们推荐字体和宽高等,都使用rpx单位,如果真的需要固定尺寸,就是用px

参考链接

cn.vuejs.org/v2/api/#Vue…

www.uviewui.com/components/…

www.uviewui.com/