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