VUE二次パッケージ素子UIツリー、（A）成分

フォルダを作成します。1.

2。

1）高度INIT S  

2）安装NPM iは発現axios要素-UI loadsh -S

3. server.jsファイルを作成します。書き込みインタフェース

let express = require('express')
let app = express();


//解决跨域问题
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*'); //允许任何语言跨域
  if (req.method === 'OPTIONS') {
    return res.send();
  }
  next();
})

app.get('/getTreeList', (req, res) => {
  res.json({
    code: 0,
    parent: [{
        name: '文件夹',
        pid: 0,
        id: 1
      },
      {
        name: '文件夹2',
        pid: 0,
        id: 2
      },
      {
        name: '文件夹3',
        pid: 0,
        id: 3
      },
      {
        name: '文件夹1-1',
        pid: 1,
        id: 4
      },
      {
        name: '文件夹2-1',
        pid: 2,
        id: 5
      }
    ],
    child: [{
        name: '文件1',
        pid: 1,
        id: 10001
      },
      {
        name: '文件2',
        pid: 1,
        id: 10002
      },
      {
        name: '文件2-1',
        pid: 2,
        id: 10003
      },
      {
        name: '文件2-2',
        pid: 2,
        id: 10004
      },
      {
        name: '文件1-1-1',
        pid: 4,
        id: 10005
      },
      {
        name: '文件2-1-1',
        pid: 5,
        id: 10006
      }
    ]
  })
})
app.listen(3040); //node server.js

実行コードの実行コード、訪問lcalhost：304 / getTreeListパスは自分自身JSONデータを書き込む見ることができます

 

4. main.js新しいファイル、およびファイルApp.vue、（二次包装Axiosのための）ファイルをapi.js

main.js

import Vue from 'vue';
import App from './App.vue'
import ElementUI from 'element-ui'; //引入
import 'element-ui/lib/theme-chalk/index.css'; //引入样式
Vue.use(ElementUI); //注册使用

export default new Vue({
  el: '#app',
  render: h => h(App)
})

api.js

import axios from 'axios'

axios.defaults.baseURL = 'http://localhost:3040'

export const getTreeList = () => {
  return axios.get('/getTreeList')
}

  App.vue

<template>
  <div>

  </div>
</template>
<script>
import { getTreeList } from './api'
export default {
  async mounted () {
    let { data } = await getTreeList();
    console.log(data);
  }

}
</script>

使用はするのに役立つVUE：

コンソール印刷データを見ることができる上記のリンクをご覧ください：

合計ファイルディレクトリ：