全局引入
1.在main.js中全局引入全部vant組件
- 優點:可以在所有vue文件的template中定義所需組件
- 缺點:打包發佈時會增加包的大小,Vue的SPA首屏打開時本來就有些慢,同時不能在js中使用類似Toast功能的組件
代碼如下:
// main.js
import Vant from 'vant'
import 'vant/lib/vant-css/index.css'
Vue.use(Vant)
// login.vue
<template>
<div class="container">
<van-field
v-model="user.loginName"
label="用戶名"
placeholder="請輸入用戶名"
/>
<van-field
v-model="user.password"
label="密碼"
placeholder="請輸入密碼"
/>
<van-button
block
hairline
type="primary"
@click="login()"
>登 錄</van-button>
</div>
</template>
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
<template>
......
</template>
<script>
export default {
data() {}
methods: {
login() {
this.$toast('我要登錄!')
}
}
}
</script>
按需引入/局部引入
這種應用稍微比較繁瑣,需要在對應的業務頁面引入所需組件
- 優點:需要什麼引入什麼,不用加載所有組件
- 缺點:每個頁面都需要操作,操作繁瑣
代碼如下:
// login.vue
<template>
......
</template>
<script>
import { Field, Button } from 'vant'
export default {
name: 'login',
components: {
[Field.name]: Field,
[Button.name]: Button
}
}
</script>
上述代碼已經可以實現組件的引用,親測有效!
但是網絡上的版本都需要進行相關配置,可以也可以參考一下
方法如下:
- 安裝 babel-plugin-import 插件,babel-plugin-import 是一款 babel 插件,它會在編譯過程中將 import 的寫法自動轉換爲按需引入的方式
npm i babel-plugin-import -D
- 在.babelrc文件中配置plugins(插件)
// .babelrc "plugins": [ "transform-vue-jsx", "transform-runtime", [ "import", { "libraryName": "vant", "libraryDirectory": "es", "style": true }, "vant" // 這個配置是依照官網實例而得,和衆多網絡版本不同 ] ],
上述內容全部爲日常項目實踐中的一點小總結,如有紕漏,還望指正!