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. 配置完成