zoukankan      html  css  js  c++  java
  • 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>

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

  • 相关阅读:
    CodeForces Virtual Participation 记录
    Raney 引理学习笔记
    题解 CF1503A Balance the Bits
    CF1493D GCD of an Array 题解
    原根表
    LOJ6102「2017 山东二轮集训 Day1」第三题 or 51nod1355 斐波那契的最小公倍数 题解
    解决js动态改变html元素而html内容只在初末时改变的问题
    【命题逻辑实验题】求给定命题公式的真值表[C语言程序实现](支持蕴含式的运算)
    【C语言】模拟简单的《掘地求生Getting Over It》(源码)
    【C语言】英雄联盟英雄查询系统(源码)
  • 原文地址:https://www.cnblogs.com/tdyang/p/13444870.html
Copyright © 2011-2022 走看看