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

Vue (4) 2024-04-20 09:12

Hi,大家好,我是编程小6,很荣幸遇见你,我把这些年在开发过程中遇到的问题或想法写出来,今天说一说光影在线webapp开发教程2 vue-cli集成mui,希望能够帮助你!!!。

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

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

光影在线webapp开发教程2 vue-cli集成mui_https://bianchenghao6.com/blog_Vue_第1张

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文件,添加如下代码

光影在线webapp开发教程2 vue-cli集成mui_https://bianchenghao6.com/blog_Vue_第2张 不用代码严格模式,不然mui.js检查到语法错误就报错了

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

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

今天的分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。

发表回复