Vue学习（二）Git管理和导入组件库

最新推荐文章于 2026-06-21 16:42:19 发布

原创最新推荐文章于 2026-06-21 16:42:19 发布 · 489 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue #vue.js #vue-cli3

收录于

vue 专栏收录该内容

12 篇文章

订阅专栏

这篇博客介绍了如何在Vue项目中导入 vant 组件库，配置全局样式，并通过 postcss-pxtorem 插件自动将px单位转换为rem，以实现响应式布局。同时，还引入了'amfe-flexible'来自动设置rem基准值，确保在不同设备上的适配性。

##导入vant

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 加载全局样式
import './styles/index.less'
// 加载vant组件库
import Vant from 'vant'
// 加载vant组件库样式
import 'vant/lib/index.css'
// 自动设置rem基准值（html标签字体大小）
import 'amfe-flexible'
// 创建vue实例，进行配置！！！
createApp(App).use(store).use(Vant).use(router).mount('#app')

导入postcss

/**
* postcss的配置文件
*/
// postcss.config.js
module.exports = {
  // 配置需要的插件
  plugins: {
    // px转换为rem
    'postcss-pxtorem': {
      rootValue ({ file }) {
        return file.indexOf('vant') !== -1 ? 37.5 : 75
      },
      propList: ['*']
    }
  }
}