混合开发--vue之mand-mobile 框架引入，解决组件巨大问题

1、手动安装

npm install mand-mobile --save

2、引入

import {ActionBar,Toast} from 'mand-mobile' //组件
import 'mand-mobile/lib/mand-mobile.css' //样式

3、注册

 components: {
    [ActionBar.name]: ActionBar,
  },

4、布局中引入

<div id="login">
  
     <md-action-bar id="bar" :actions="data" />

    <router-view/>

5、action声明

data(){

return{

data:[

{

text:'取消',

onClick:this.handleClick

},{

text:'登录',

onClick:this.loginClick,

}

]

}

}

6、编译   npm run dev

组件巨大

解决问题：

安装postcss-pxtorem

npm install postcss-pxtorem --save-dev

1、找到   .postcssrc.js  文件

2、增加一下代码：

 "postcss-pxtorem": {
      rootValue: 32,
      propList: ['*']
    }

3、运行报错

Module build failed: Error: [object Object] is not a PostCSS plugin

4、查看package.json 发现 postcss-pxtorem 版本为 6.0.0

5、对postcss-pxtorem做降级处理，为 5.0.0

编译成功

结果展示：