Vant 组件库的安装按需引入全局引入及样式修改

Posted 2023-02-05 chizhongwenshan

目录

1. 下载安装

2. 全局引入：在main.js文件内引入

3. 按需引入：在main.js文件内引入 ( 推荐 )

4. 手动按需引入组件：在使用组件的页面内引入

5. 引入其他内容：（依据项目需求进行配置）

6. 修改组件原来样式：

1. 下载安装
  1.1  安装Vant：

      Vue 3 项目，安装最新版 Vant： npm i vant -S

      Vue 2 项目，安装 Vant 2： npm i vant@latest-v2 -S

  1.2  安装插件：yarn add babel-plugin-import -D (babel.config.js配置文件)

module.exports =
  plugins: [
    ['import',
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    , 'vant']
  ]
;
  1.3  postcss.config.js配置文件进行适配：

module.exports =
  plugins:
    "postcss-pxtorem":
      rootValue( file )
        return file.indexOf("vant") !== -1 ? 37.5 : 75;
      ,
      propList: ["*"],
    ,
  ,
;
2. 全局引入：在main.js文件内引入
import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';
 
Vue.use(Vant);
3. 按需引入：在main.js文件内引入 ( 推荐 )
import Vue from "vue";
import App from "./App.vue";
import "vant/lib/index.css";
import Form, Field, Button, List, Icon, Toast from "vant"; // 按需引入,优化加载速度
 
Vue.use(Form);
Vue.use(Field);
Vue.use(Button);
Vue.use(List);
Vue.use(Icon);
Vue.use(Toast);
4. 按需引入组件：在使用组件的页面内引入
手动按需引入
1. 引入:
     import Button from 'vant/lib/button'; // button组件
     import 'vant/lib/button/style';               // button样式
2. 注册：
export default
    components: // 手动注册组件名
        VanButton: Button  //注册大驼峰，使用写短横线
       === //[Button.name]: Button
 
3. 使用：
<van-button type="primary">主要按钮</van-button>
自动按需引入：
1. 安装插件:yarn add babel-plugin-import -D
2. 在babel配置文件里 (babel.config.js):
module.exports =
  plugins: [
    ['import',
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    , 'vant']]
3. 全局注册 - 会自动按需引入
import Button from 'vant';
Vue.use(Button)
5. 引入其他内容：（依据项目需求进行配置）
import router from "./router"; // 路由对象
import "@/mobile/flexible"; // 适配，当网页宽度改变, 会修改html的font-size
import "vant/lib/index.css"; // vant组件样式
import "./assets/common.less"; // 引入公共样式
import "amfe-flexible"; // 页面适配，动态设置 REM 基准值
import "@vant/touch-emulator"; // 桌面端将mouse事件转换成touch事件
... ... （导入的vant组件）
 
Vue.config.productionTip = false;
 
new Vue(
  router,
  render: (h) => h(App),
).$mount("#app");
6. 修改组件原来样式：
方法一：通过谷歌调试工具找到当前类名，::v-deep样式穿透进行修改（没有下载less的话不能进行样式嵌套）

::v-deep
  .van-field__label
    display: flex;
    justify-content: end;
    align-items: center;
 
  .van-nav-bar
    background-color: #1989fa;
 
  .van-nav-bar__title
    color: #fff;
 

方法二：给标签手动添加 class 类名进行修改，class = 'tab'

.tab
   display: flex;
   justify-content: end;
   align-items: center;

————————————————