Element组件库安装程序
首先安装依赖
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 的引入。需要注意的是,样式文件需要单独引入
Vant组件安装程序
通过 npm 安装
在现有项目中使用 Vant 时,可以通过 npm 或 yarn 进行安装:在这里有俩个版本
一个是vue2和vue3 (注意:版本对应版本)
# Vue 2 项目,安装 Vant 2:npm i vant -S
# Vue 3 项目,安装 Vant 3:npm i vant@next -S
我自己本身比较习惯的是导入所有的组件(比较懒)这里也有一个弊端 那就是你引入了所有的组件会导致你的代码体积增大。因此不建议此方法
除了导入所有的组件之外 还有一种就是按需引入 根据自己的需要去引入
例如:
import Button from 'vant/lib/button';
import 'vant/lib/button/style';
那个地方用在哪个地方引
引入全部的是在main.js里面引
import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);
常见的问题:
为什么在HTML页面当中使用Vant,有部分代码可能无法正常渲染出来?
这是因为 HTML 并不支持自闭合的自定义元素,也就是说这种的语法是不被识别的,使用
完整的闭合标签可以避免这个问题。