Внедрение vue-cli3.0 и vant

Потому что наш проектvue-cli3.xДобавление возможностей на основе того, как вводятся новые проекты, созданные с помощью строительных лесов.vant, кратко.
Связанные с проектом:
panda-vue-template
Соберите Vue Small Mall 2.0 вручную

1. Установка

Если вы построили его со старыми лесамиvueпроект, как импортировать и использоватьvantможешь посмотреть на это--> Представлена библиотека компонентов vant.;
новый@vue/cli3.xПознакомить вант со строительными лесами тоже очень просто.Сначала установим его:

$ npm install vant --save

Поскольку наш проект изначально использовалsassприходит в качестве прекомпилеров для CSS, но корпус используетсяlessсинтаксис, поэтому нам также нужно установитьless, иначе будет сообщено об ошибке.

$ npm isntall less less-loader --save-dev

2. Конфигурация

Настройка и установка см. на официальном сайтеЗнакомство с компонентами. Учебное пособие.Вот и все.
Мы просто следуем учебнику, в нашемbabel.config.jsНастройте его в:

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  // vant引入：
  plugins: [
    [
      'import',
      {
        libraryName: 'vant',
        libraryDirectory: 'es',
        style: name => `${name}/style/less`
      },
      'vant'
    ]
  ]
}

4. Используйте

По инструкции на официальном сайте можно импортировать по мере необходимости.Например мы вmain.jsПредставьте это:

// main.js
import { Button } from 'vant'
Vue.use(Button)

если вы используетеpostcss-px-to-viewportПриходитьНастройте vw для решения проблемы адаптации мобильного терминала,БудуviewportWidthустановлен в750, то вам также необходимоpostcss.config.jsфайл этоselectorBlackListсписокvantДобавьте это, потому что стиль ванта - это пресса.325pxСпроектировать, иначе составные части ванта уменьшится вдвое.

module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      unitToConvert: 'px',
      viewportWidth: 750,
      unitPrecision: 3,
      propList: ['*'],
      viewportUnit: 'vw',
      fontViewportUnit: 'vw',
+     selectorBlackList: ['.ignore', 'van'],
      minPixelValue: 1,
      mediaQuery: false,
      replace: true,
      exclude: [],
      landscape: false,
      landscapeUnit: 'vw',
      landscapeWidth: 568
    }
  }
}

5. Другое

Как изменитьvantцвет темы? существует@vue/cli3.xВ проекте изменить цвет темы очень просто.
мы можемvue.config.jsконфигурационный файлПередать параметры загрузчику препроцессора, вы можете заменитьvantСтиль по умолчанию:

module.exports = {
  // ...
  css: {
    loaderOptions: {
      less: {
        modifyVars: {
          'font-size-sm': '100px',
          'font-size-md': '200px',
          'font-size-lg': '300px',
        }
      }
    }
  }
};

vantОн также дает нам таблицу стилей для него:вантовая таблица стилей

6. Резюме

Вероятно, их так много, что вы можете перейти к использованию в проекте для получения подробной информации.

Ссылка на ссылку: Изменить цвет темы ванта
вантовая таблица стилей
panda-vue-template
Соберите Vue Small Mall 2.0 вручную