vue-cli整合mui
vue 2.5.2
前提已经安装了node,npm,淘宝镜像命令cnpm,全局的脚手架vue-cli
1、创建vue-cli+webpack的脚手架项目
vue_mui项目名
vue init webpack vue_mui
2、接下来的操作是配置项目,一直按enter键即可,EsLint可以输入n,这是语法检查,很严格。
3、然后就是安装过程等待
如果出现这个错误
npm ERR! errno -4058 npm ERR! enoent ENOENT: no such file or directory, open 'E:\***\***\package.json'
执行命令
npm rebuild node-sass
搭建成功
执行npm run dev就可以看到vue的默认页面。
4、下载mui,github地址https://github.com/dcloudio/mui
把项目中dist下的都拷贝到vue项目中,一般放在asset目录中,我这里直接放在项目目录下
5、main.js,导入mui的js和css
Vue.prototype.mui=mui
6、加别名,build/webpack.base.conf.js,后面的是js的路径名
7、build/webpack.dev.conf.js,找到到plugins加上,我的初始化项目没有new webpack.ProvidePlugin,加上这个就行。
new webpack.ProvidePlugin({
mui:'mui',
'window.mui':'mui'
}),
8、找到.babelrc文件
加上:后面的是js路径,严格模式中忽视这个文件,mui不支持,注意这里不要写错
"ignore":['./mui/js/mui.min.js']
9、看一下结果,这是默认的HelloWord.vue,修改加上样式和mui的ajax去调用请求
<template> <div class="hello"> <h2>{{ msg }}</h2> <form class="mui-input-group"> <div class="mui-input-row"> <label>用户名</label> <input type="text" class="mui-input-clear" placeholder="请输入用户名"> </div> <div class="mui-input-row"> <label>密码</label> <input type="password" class="mui-input-password" placeholder="请输入密码"> </div> <div class="mui-button-row"> <button type="button" class="mui-btn mui-btn-primary" @click="login">确认</button> <button type="button" class="mui-btn mui-btn-danger" >取消</button> </div> </form> </div> </template> <script> export default { name: 'HelloWorld', data () { return { msg: 'Welcome Vue with mui App' } }, created () { mui.init() }, methods:{ login(){ // 发送axios请求 mui.ajax({ url:"http://localhost:9090/user/list", type: 'get', success: function(data) { debugger }, error: function(xhr, type, errorThrown) { debugger } }); } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } </style>
到这里简单的整合就完成了。