vue移动端UI框架——Vant全局引入vs局部引入

// login.vue

<van-field

v-model=“user.loginName”

label=“用户名”

placeholder=“请输入用户名”

/>

<van-field

v-model=“user.password”

label=“密码”

placeholder=“请输入密码”

/>

<van-button

block

hairline

type=“primary”

@click=“login()”

登 录

2.在main.js全局引入公共组件

• 优点：公共组件只需要进入一次，所有页面都可调用

• 缺点: 功能组件多时，在main.js中，vue需要逐个挂载这些组件

代码如下：

// main.js

import { Toast, Loading } from ‘vant’

import ‘vant/lib/index.css’

Vue.prototype.$toast = Toast

Vue.prototype.$loading = Loading

…

对于挂载在vue实例上的组件，就采用this.属性名的形式进行调用

// login.vue