Ant Design of Vue 应用于浏览器引入和es5中

Ant Design of Vue 应用于浏览器引入和es5中

有很小可能会出现要在一个前后端不分离的项目中利用Ant Design和Vue，难上加难的是，还不能用es6语法。这时该怎么办呢？

答案如下

首先在html文件中引入如下

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js">script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/antd.min.js">script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.js">script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/antd.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js">script>

然后html代码基本不用变，关键是es6怎么适当的写成es5语法。一种方法是应用bablel。这里介绍es5语法下，如何改造Ant Design官网给出的语句。

首先，一个在html的body里最外层加一个

然后js示例代码如下：

var vue = new Vue({
    beforeCreate : function() {
        this.form = this.$form.createForm(this)
    },
    el: '#app',
    data: {
        aaa:"aaa",
        ...
    },
    methods:{
		goodsSelect: function(record){
            $.ajax({
                ...
            })
        },
        ...
        如果要引用data的值，应该使用  vue.aaa 、 vue.form.setFieldsValue() 而不是this.data
    },
})

小tips，关于如何跨域请求，其实一行代码足矣，在服务器端，一个Controller前。加入@CrossOrigin注解。即可。

关于如何使用vuex，和vuerouter，暂没试过，待续。