电商商城定制开发从零开始使用vue-easy-tree

目录

---

前言

之前写了vue实现tree电商商城定制开发虚拟滚动的文章（），电商商城定制开发但是发现有部分同学可能在引入组件时就出现一些问题。这篇文章描述下如何引入组件。

版本

示例所用相关版本：
vue：v2.6.11

vue-cli：v4.5.9

：v12.16.3

webpack：4.14.0

node-：4.14.1

sass-loader：8.0.2

示例

使用 vue create tree-demo 初始化一个demo：

1. 选择第一个[Vue 2...]：
2.  安装完成后切换到 tree-demo 目录下
3.  安装 @wchbrad/vue-easy-tree，使用命令 npm add @wchbrad/vue-easy-tree：
4.  安装sass-loader，命令：npm add sass-loader@8.0.2（有版本要求）；
5.  安装node-sass，命令：npm add node-sass@4.14.1（有版本要求）
6.  删除并改写 src\App.vue 成如下：

   <template>
     <div id="app">
       <HelloWorld />
     </div>
   </template>
    
   <script>
   import HelloWorld from "./components/HelloWorld.vue";
    
   export default {
     name: "App",
     components: {
       HelloWorld,
     },
   };
   </script>
    
   <style>
   html,
   body {
     margin: 0;
     padding: 0;
   }
   </style>

7. 示例这里使用局部引用，全局引入可以参考，修改 src\components\HelloWorld.vue 成如下代码：

   <template>
     <div class="hello">
       <vue-easy-tree
         ref="veTree"
         node-key="id"
         height="calc(100vh - 30px)"
         :data="treeData"
         :props="props"
       ></vue-easy-tree>
     </div>
   </template>
    
   <script>
   import VueEasyTree from "@wchbrad/vue-easy-tree";
   // 样式文件，可以根据需要自定义样式或主题
   import "@wchbrad/vue-easy-tree/src/assets/index.scss";
   export default {
     name: "HelloWorld",
     components: {
       VueEasyTree,
     },
     data() {
       return {
         props: {
           label: "name",
           children: "children",
         },
         treeData: [],
       };
     },
     created() {
       const data = [],
         root = 8,
         children = 3,
         base = 1000;
       for (let i = 0; i < root; i++) {
         data.push({
           id: `${i}`,
           name: `test-${i}`,
           children: [],
         });
         for (let j = 0; j < children; j++) {
           data[i].children.push({
             id: `${i}-${j}`,
             name: `test-${i}-${j}`,
             children: [],
           });
           for (let k = 0; k < base; k++) {
             data[i].children[j].children.push({
               id: `${i}-${j}-${k}`,
               name: `test-${i}-${j}-${k}`,
             });
           }
         }
       }
       this.treeData = data;
     },
   };
   </script>
    
   <!-- Add "scoped" attribute to limit CSS to this component only -->
   <style scoped>
   </style>

8.  运行：npm run serve

最简单的demo完成，效果如下：