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

1
2
vue create vant-demo

1
2
vue ui

1
2
npm i vant -S

1
2
npm i babel-plugin-import -D

1
2
3
4
5
6
import { Button,Cell, CellGroup } from 'vant';

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

1
2
3
4
5
6
7
8
9
10
module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};

1
2
3
npm install postcss-pxtorem --save-dev
npm i -S amfe-flexible

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
module.exports = {
  lintOnSave: true,
  css: {
      loaderOptions: {
          postcss: {
              plugins: [
                  require('postcss-pxtorem')({
                      rootValue : 37.5, // 换算的基数
                      propList   : ['*'],
                  }),
                  require('autoprefixer')({
                    browsers: ['Android >= 4.0', 'iOS >= 8']
                  })
              ]
          }
      }
  	},
}

1
2
import 'amfe-flexible/index.js'