vuecli4 d3v5 力导向图示例(封装组件)
项目简介
前段时间接到一个项目,参考这个网站https://www.ownthink.com/(思知),做一个类似功能的知识图谱功能的平台。需要使用D3V5开发,所以就做了这么一个demo程序。
使用d3v5开发的ForceDirected的vue组件,方便灵活使用。
本项目参考官方示例:https://gywgithub.github.io/vue-d3-examples/#/examples/forcedirected
如果觉得本项目能帮助到你,欢迎star支持,谢谢。
项目下载
gitee地址:https://gitee.com/e4glet/vue4_d3v5_forcedirected
github地址:https://github.com/e4glet/vue4_d3v5_forcedirected
项目效果
框架版本
nodejs v12.16.1
vue/cli 4.4.6
d3/5.16.0
框架结构
src -- 资源目录
axios -- 封装axios
assets -- 静态资源文件
components -- 组件
router -- 路由,负责指定页面链接
service -- 服务层,数据联调,引入请求
store -- Vuex
views -- 视图页面
main.js -- 入口文件
1
2
3
4
5
6
7
8
9
项目安装
npm install
1
Compiles and hot-reloads for development
npm run serve
1
Compiles and minifies for production
npm run build
1
项目访问入口
http://localhost:8080/
修改vue默认端口
在“nodemodules文件夹”→“@vue”→“@cli-service”→“lib”→“commands”→“serve.js”中,修改默认端口
const defaults = {
host: '0.0.0.0',
port: 8089, -- 这里修改
https: false
}
1
2
3
4
5
更新日志
2020年7月24日
上传demo示例
————————————————
版权声明:本文为CSDN博主「e4glet」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/eaglet8468/article/details/107552315