vue-cli整合mui

前提已经安装了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>

到这里简单的整合就完成了。