mui不属于插件,所以在vue中不能使用npm下载插件,那么这时候在文件中直接引入就行了。
但是在引入的时候还有很多坑,下面就是我使用过之后总结的mui引入配置方法
1、搭建vue-cli脚手架(根据需要自己搭建vue)
搭建完以后的目录是这样的:
但是呢,在文件夹中实际上是这样的
如果这两个文件在文件夹中不显示,那么你文件夹设置隐藏了,请按照如下方式把这两个文件放出来
- win10系统在文件夹上面点击"查看"-->“隐藏的项目”
-
win7 系统在文件夹左上角点击“组织”,“文件夹与搜索选项”“查看”,
把红框框圈起来的地方选中就可以了
2、开始配置
静态引入
1、如果不知道mui的js、css在什么地方下载,那么就新建一个完整的mui示例项目好了:
使用HBuider,新建一个移动App,选中红框圈的任一个都可以
把里面的js文件复制粘贴到vue中src-->assets里面,注意记得路径
把css、fonts复制粘贴到static里面,注意css和fonts文件夹要同级,不然需要修改代码路径(如果不需要里面的图标,那么fonts不需要引入,如果需要就必须引入)
2、在你的index.html主页面引入静态文件css
比如说像我这样,只引入了一个mui.min.css和fonts,而且两个还不在同一级,那么问题来了:
图标不会显示(如果文件夹在同一级就没有问题)
这是因为图标在css中引入,路径一改它就找不到文件了,按照下图把路径改一下就好
mui.min.css
如图,在min.min.css中把引入的fonts中的mui.ttf文件的路径改成你的就可以了
vue引入(所有的东西都是新加的,原有的不要删除)
main.js
bulild 中webpack.base.conf.js
bulild 中webpack.dev.conf.js
config中的 index.js(跨域配置,不需要自动跳过)
.babelrc :加上红框里面的一句话,注意你js的路径
"ignore":[ './src/assets/mui/js/mui.js']
.eslintignore :加上红框里面的一句话,注意你js的路径
最后,在你写的vue页面加入一个样式
* {
touch-action: pan-y;
}
记得在js中把mui初始化:
mui.init();
github地址:https://github.com/HC-W/vue-cli-mui
node-modules需要自己npm/cnpm下载,数据接口里面没有数据,主要是提供文件配置