Vant UI + Vue + Cli3.0+Remモバイル端末プロジェクト構築

Vant UI + Vue + Cli3.0+Remモバイル端末プロジェクト構築
1.vueプロジェクトの作成

プロジェクトの作成

vue create vant-demo

は、less(vue uiの可視化ページによる依存プラグインのインストール)

を導入する.

vue ui

2.導入vant ui

npm i vant -S

3.必要に応じて導入
3-1. babelプラグインのインストール

npm i babel-plugin-import -D

お知らせ:自動オンデマンド導入を使用する場合、関連コンポーネントを使用する場合、maim.jsに一つ一つ導入する必要があります.以下のようにします.

import { Button,Cell, CellGroup } from 'vant';

Vue.use(Cell);
Vue.use(CellGroup)
Vue.use(Button);

3-2. 構成babel.config.js

module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};

4.Rem適合
4-1. 取り付けpostcss-pxtoremとamfe-flexible

npm install postcss-pxtorem --save-dev
npm i -S amfe-flexible

4-2. 構成vue.config.js

module.exports = {
  lintOnSave: true,
  css: {
      loaderOptions: {
          postcss: {
              plugins: [
                  require('postcss-pxtorem')({
                      rootValue : 37.5, //      
                      propList   : ['*'],
                  }),
                  require('autoprefixer')({
                    browsers: ['Android >= 4.0', 'iOS >= 8']
                  })
              ]
          }
      }
  	},
}

4-3. 構成main.js

import 'amfe-flexible/index.js'

5.構成完了