Vant UI + Vue + Cli3.0 + Rem移动端项目搭建

原创

CHH5431 2021-08-27 12:37:56 博主文章分类：Vue ©著作权

©著作权归作者所有：来自51CTO博客作者CHH5431的原创作品，请联系作者获取转载授权，否则将追究法律责任

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

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']
                  })
              ]
          }
      }
  	},
}