杂交水稻？PHP+Vue+Antd+Jquery

无聊前端苟
1,065 阅读2分钟

我正在参加「掘金·启航计划」

前言

Vue框架对于前端开发者来说，基本没有不了解的，大多数情况下，我们在日常开发的前端项目中，基本都是以工程化为标准来进行开发的。

我们一般会使用vue-cli来搭建一个Vue项目，然后使用npm来下载对应需要使用到的依赖库或UI组件库进行开发。

一般纯前端项目，按上面来创建项目进行开发是没问题的。但如果不是呢（狗头）。

需求

公司的后台管理项目分为纯前端项目控制的界面和嵌套在PHP项目内的一部分界面。

纯前端的界面是通过iframe嵌套进入PHP项目内的

这次的小需求是几个界面新增树形下拉选择器，这里使用的是Ant Design Vue的TreeSelect来实现的。

有几个是在纯前端项目内的界面，这部分就很好修改。

还有一个界面是嵌套在PHP项目内的界面，像这种的话，就不可能使用vue的工程化来弄了。而且这个界面原本是使用Jquery来编写实现的

方法

如何在PHP项目内使用vue+Ant Design Vue？

其实很简单，回顾我们一开始学习Vue的时候，是不是都是通过script标签引入cdn上的vue的?

因此在PHP内使用Vue，我们也可以这样做。

通过上面引入后，我们就可以直接使用全局的Vue对象了。

而不通过工程化的方式来引入Ant Design Vue也是跟上面一样的。引入后也会有全局的antd对象可以使用

在antd的官网就可以找到对应的cdn链接

2659ee1272c4a0cd1f4aba6707354041.png

de7d84c32e9fd6607531ba49530cae94.png

只不过需要注意一点：

Ant Design Vue的版本要跟Vue的版本对的上，不然会报错

c64597e67a50f099f9d1715609b64644.png

这里我是直接把对应的文件下载到PHP项目内，在引用本地的文件来使用的

<?php
$this->registerCssFile('/cdn/ant-design-vue/antd-1.7.8.css');
$this->registerJsFile('/cdn/ant-design-vue/antd-1.7.8.js');
$this->registerJsFile('/js/vue/vue.js');
?>

引入Vue和Ant Design Vue后我们就可以像在前端项目内一样使用这两个东西了。

<div class="row" id="treeSelect">
  <label class="col-sm-2 control-label">展示城市</label>
  <div class="col-sm-8">
    <a-tree-select  :tree-default-expand-all="false" v-model:value="display_city" style="width: 100%" tree-checkable 
            show-checked-strategy="SHOW_PARENT"  :tree-data='cityList' :max-tag-count="10" placeholder="请选择城市" />
  </div>
</div>

<script type="text/javascript">
    var vm = new Vue({
        el: "#treeSelect",
        data: {
            display_city:[],
            cityList: cityData
          },
        methods: {},
        component: {
          // 注册antd的树形下拉组件
            'a-tree-select': antd.TreeSelect
        }
    });
</script>

这样，我们就可以在PHP项目内愉快的使用Vue+Ant Design Vue啦~~~

因为原本这个PHP界面是使用Jquery实现的, 所以同一个界面内使用了Vue+Jquery+Ant Design Vue。。。

如果Jquery需要使用Vue的数据可以通过vm来使用:

console.log(vm.display_city); // []

总结

写习惯了Vue+vue-cli+各种依赖库，突然需要在后端项目内使用前端的框架+UI组件，一瞬间也是懵逼没思路的，后面才想起来这种方法，啊就是逊👎啦

avatar
文章
阅读
粉丝