光影在线webapp开发教程2 vue-cli集成mui

做前端做久了什么项目首先就是想到用什么框架。webapp的ui框架也是很多。mui是比较小巧灵活而又简单的app ui框架，本来以为在vue中集成mui框架是很轻松的事情，结果集成中发现了不少问题，这里记录下来，方便后面小伙伴参考。

首先要下载mui的css样式和js文件，可以去他们官网看看，下他们的demo或者在hbuilder里面生成一个mui项目，然后把dist目录考到我们vue项目的 src目录下的assets目录里面。

1、在src的main.js文件里面引入mui.css

 import "./assets/dist/css/mui.css"   引入样式后面可以在所有组件里面用mui的css样式了

2、在main.js引入mui.js文件会遇到较多问题

import * as mm from "./assets/dist/js/mui.js" 

global.mui = mm  //把mui做成全局变量，整个vue项目都能用。

 切记要在main.js文件引入mui.js,如果在组件里面引入mui.js会报错，报relative not find module的错误，在组件里面找不到相应的模块。

有可能还会报

 'caller', 'calle', and 'arguments' properties may not be...的错误

这个时候修改目录下面.babelrc文件，添加如下代码

 不用代码严格模式，不然mui.js检查到语法错误就报错了

现在，我们在vue项目里面可以随意用mui的内容了！

本文技术由光影在线电影网提供