Element組件庫(kù)安裝程序
首先安裝依賴
npm i element-ui -S
安裝完之后在main.js里面鏈接起來
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);
以上代碼便完成了 Element 的引入誉券。需要注意的是燕雁,樣式文件需要單獨(dú)引入
Vant組件安裝程序
通過 npm 安裝
在現(xiàn)有項(xiàng)目中使用 Vant 時(shí),可以通過?npm?或?yarn?進(jìn)行安裝:在這里有倆個(gè)版本
一個(gè)是vue2和vue3 (注意:版本對(duì)應(yīng)版本)
# Vue 2 項(xiàng)目彻坛,安裝 Vant 2:npm i vant -S
# Vue 3 項(xiàng)目寂祥,安裝 Vant 3:npm i vant@next -S
我自己本身比較習(xí)慣的是導(dǎo)入所有的組件(比較懶)這里也有一個(gè)弊端 那就是你引入了所有的組件會(huì)導(dǎo)致你的代碼體積增大荐虐。因此不建議此方法
除了導(dǎo)入所有的組件之外? 還有一種就是按需引入?根據(jù)自己的需要去引入
例如:
import Button from 'vant/lib/button';
import 'vant/lib/button/style';
那個(gè)地方用在哪個(gè)地方引
引入全部的是在main.js里面引
import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);
常見的問題:
為什么在HTML頁(yè)面當(dāng)中使用Vant,有部分代碼可能無法正常渲染出來丸凭?
這是因?yàn)?HTML 并不支持自閉合的自定義元素福扬,也就是說這種的語法是不被識(shí)別的,使用
完整的閉合標(biāo)簽可以避免這個(gè)問題惜犀。