固然，插手你没有一个vue措施，这里也给出创建一个vue措施的命令。固然，你必定装了vue-cli，不然你不会点进这篇博客

vue init webpack vue-demo01

项目的目录类似如下：

对了，这个demo里使用了element-ui
安置方法：

npm i element-ui -S

配置方法：

可以直接拷走

import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); jquery安置

直接运行下面的命令

npm run jquery jquery引用

在需要使用jquery的组件里，引入jquery后，即可正常使用

import $ from 'jquery' 举例

HelloWorld.vue

<template> <div> <el-tree :data="list" :props="defaultProps" @node-click="handleNodeClick"></el-tree> </div> </template> <script> import $ from 'jquery' export default { name: 'HelloWorld', data() { return { list:[], defaultProps: { children: 'children', label: 'label' } } }, mounted() { this.getList() }, methods: { handleNodeClick(data) { console.log(data); }, getList() { var _this = this $.getJSON("../static/list.json", function (data) { _this.list = data }); } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> </style>

list.json

[{ "label": "一级 1", "children": [{ "label": "二级 1-1", "children": [{ "label": "三级 1-1-1" }] }] }, { "label": "一级 2", "children": [{ "label": "二级 2-1", "children": [{ "label": "三级 2-1-1" }] }, { "label": "二级 2-2", "children": [{ "label": "三级 2-2-1" }] }] }, { "label": "一级 3", "children": [{ "label": "二级 3-1", "children": [{ "label": "三级 3-1-1" }] }, { "label": "二级 3-2", "children": [{ "label": "三级 3-2-1" }] }] }]

运行效果：

如果需要源码，，不才面下载

下载地点：vue-demo01

==如果这篇博客对你有用，点个赞再走呗~==

在vue中使用jquery