光影在线webapp开发教程2 vue-cli集成mui
2018-04-05 12:43
573 查看
做前端做久了什么项目首先就是想到用什么框架。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的错误,在组件里面找不到相应的模块。
有可能还会报
不用代码严格模式,不然mui.js检查到语法错误就报错了
现在,我们在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的内容了!
本文技术由光影在线电影网提供
相关文章推荐
- 跨平台移动APP开发进阶(二)HTML5+、mui开发移动app教程
- Apicoud+vue开发高性能商城APP项目实战教程
- 跨平台移动APP开发进阶(二)HTML5+、mui开发移动app教程
- mui开发APP教程之创建项目
- WebApp开发实战视频教程
- 使用vue-cli+webpack搭建VUE开发环境
- mui开发APP教程之mui.ajax请求后出现“加载中”
- thinkphp集成前端脚手架Vue-cli的教程图解
- mui开发APP教程之年月日级联
- mui开发APP教程之仿天猫购物车
- vue.js开发外卖App项目总结之webpack的详细配置(三)
- HTML5+开发移动app教程4-mui中几种open页面的区别
- Appcan+vue+vux+webpack开发app(原创)
- 大前端全套完整教程106G 爱前端-邵山欢课程 node+angular+vue+react+webapp 高级部分
- iOS APP开发集成Apple Pay与银联SDK开发教程(附示例代码)
- IOS开发~web在线安装App
- mui开发APP教程之mui.ajax请求后出现“加载中”
- webpack+vue 开发app(一)
- mui开发APP教程之仿天猫支付弹出自定义框
- 使用Eclipse+Maven+Jetty构建Java Web开发环境(几个教程综合集成2014发行)