vue init webpack缺少标识符_在 vue 中使用 ztree

vue-cli版本：@vue/cli 4.3.1

安装ztree和jquery

npm i @ztree/ztree_v3npm i jquery@1.11.3

打开vue.config.js文件，添加以下配置，如果没有这个文件，就新建一个。

'use strict'const webpack = require('webpack')module.exports = {    runtimeCompiler: true,    configureWebpack: {        plugins: [            new webpack.ProvidePlugin({                jQuery: 'jquery',                $: 'jquery',                "windows.jQuery": "jquery"            })        ]    }}

再找到package.json的eslintConfig，在env里面添加jquery。

"eslintConfig": {    "env": {        "node": true,        "jquery": true    }}

安装配置就这样都搞定了，下面开始使用ztree。在main.js引入ztree的js、css。

import '@ztree/ztree_v3/js/jquery.ztree.core.min.js'import '@ztree/ztree_v3/css/zTreeStyle/zTreeStyle.css'

在vue中创建一棵树

    export default {    name: 'ZTree',    data() {        return {            ztree_obj: null,            ztree_setting: {            },            ztree_list: [                {id: 1, name: "华南区", children: [                    {id: 111, name: "张三"},                    {id: 112, name: "李四"},                ]},                {id: 2, name: "西南区", children: [                    {id: 221, name: "王五"},                    {id: 222, name: "李六"},                ]}            ]        }    },    methods: {        initTree: function() {            this.ztree_obj = $.fn.zTree.init($('#ztree'), this.ztree_setting, this.ztree_list)        }    },    created: function() {        let _this = this        $(document).ready(function(){            _this.initTree()        });    }}

运行结果

在vue中调用ztree值得注意的地方：初始化ztree要等dom元素加载完毕，vue用的是虚拟dom，所以此处笔者将初始化代码放到了$(document).ready()里面。也不一定非得这样，只要知道dom加载完了就可以了。