.
This commit is contained in:
NLRX-WJC
14
JTopoInVue/App.vue
Normal file
14
JTopoInVue/App.vue
Normal file
@@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<jtopo/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import jtopo from './components/jTopo'
|
||||
export default {
|
||||
name: 'app',
|
||||
components:{jtopo}
|
||||
}
|
||||
</script>
|
||||
|
||||
44
JTopoInVue/README.md
Normal file
44
JTopoInVue/README.md
Normal file
@@ -0,0 +1,44 @@
|
||||
# 1.前言
|
||||
|
||||
[jTopo（Javascript Topology library)]([http://www.jtopo.com](http://www.jtopo.com/)) 是一款完全基于HTML5 Canvas的关系、拓扑图形化界面开发工具包。其体积小，性能优异，由一群开发爱好者来维护。唯一感觉不足的是它是一个纯`js`库，没有像使用`ES6`语法，不能像模块化开发那样使用`import`导入，
|
||||
|
||||
由于博主的项目是使用vue-cli搭建的模块化开发项目，想要使用第三方库最好的方式是通过`npm install xxx`安装，然后在项目里`import xxx`来使用。但是在`JTopo`官网上并没有发现有该库的`npm`包，在`www.npmjs.com`上搜索`JTopo`，虽然找到了该库的`npm`包，但是这些包都是由一些个人开发者通过修改源码上传的，并且年限过久，博主担心直接使用的话可能会有一些诡异的`bug`，所以博主研究了一下，如何在`vue-cli`项目中直接导入第三方`js`库，幸运的是，很快就找到了办法，并且很容易哈，现将方法记录下来，并提供demo，供大家参考。
|
||||
|
||||
# 2.解决办法
|
||||
|
||||
我们知道，无论是什么项目，最终通过打包后跑在浏览器上的肯定是一个`html`文件，在`Vue`中就是根目录下的`index.html`,在该文件中会将`webpack`打包后的`build.js`文件通过`<script>`标签方式引入，既然如此，我们可以大胆想象一下，我们可以认为`jtopo.js`就是`webpack`打包输出的文件，我们也将其手动在`index.html`文件中通过`<script>`标签方式引入是不是就可以使用了呢。通过实验，果真如此。
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>JTopoInVue</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script src="/lib/jtopo-0.4.8-min.js"></script>
|
||||
<script src="/dist/build.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
这样引入之后，我们就可以在项目中按照`jtopo`官方文档那样使用了该库啦。
|
||||
|
||||
# 3.不足之处
|
||||
|
||||
`jtopo`官网还提供了工具栏，该工具栏功能是在`toolbar.js`中实现的，而该`js`文件内部依赖了`jQuery`，所以要想在项目中使用该工具栏，必须安装`jQuery`，而博主在项目中没有使用工具栏，所以就没有在继续研究，如果有这方面需求的小伙伴可自行研究使用。
|
||||
|
||||
# 4.运行demo
|
||||
|
||||
``` bash
|
||||
# install dependencies
|
||||
npm install
|
||||
|
||||
# serve with hot reload at localhost:8080
|
||||
npm run dev
|
||||
|
||||
# build for production with minification
|
||||
npm run build
|
||||
```
|
||||
|
||||
35
JTopoInVue/components/jTopo.vue
Normal file
35
JTopoInVue/components/jTopo.vue
Normal file
@@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<div>
|
||||
<canvas width="800" height="580" id="canvas"></canvas>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "jtopo",
|
||||
mounted() {
|
||||
this.initTopo()
|
||||
},
|
||||
methods: {
|
||||
initTopo() {
|
||||
let canvas = document.getElementById("canvas");
|
||||
|
||||
let stage = new JTopo.Stage(canvas);
|
||||
|
||||
// stage.eagleEye.visible = true;
|
||||
stage.wheelZoom = 1.2; //缩放比例
|
||||
let scene = new JTopo.Scene(stage);
|
||||
scene.background = '/static/bg.jpg';
|
||||
|
||||
var node = new JTopo.Node("难凉热血");
|
||||
node.setLocation(409, 269);
|
||||
scene.add(node);
|
||||
|
||||
|
||||
// 将画布居中
|
||||
stage.centerAndZoom();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
12
JTopoInVue/index.html
Normal file
12
JTopoInVue/index.html
Normal file
@@ -0,0 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>JTopoInVue</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script src="/lib/jtopo-0.4.8-min.js"></script>
|
||||
<script src="/dist/build.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
3
JTopoInVue/lib/jtopo-0.4.8-min.js
vendored
Normal file
3
JTopoInVue/lib/jtopo-0.4.8-min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
7
JTopoInVue/main.js
Normal file
7
JTopoInVue/main.js
Normal file
@@ -0,0 +1,7 @@
|
||||
import Vue from 'vue'
|
||||
import App from './App.vue'
|
||||
|
||||
new Vue({
|
||||
el: '#app',
|
||||
render: h => h(App),
|
||||
})
|
||||
34
JTopoInVue/package.json
Normal file
34
JTopoInVue/package.json
Normal file
@@ -0,0 +1,34 @@
|
||||
{
|
||||
"name": "JTopo in Vue",
|
||||
"description": "JTopo in Vue",
|
||||
"version": "1.0.0",
|
||||
"author": "NLRX",
|
||||
"license": "MIT",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
|
||||
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
|
||||
},
|
||||
"dependencies": {
|
||||
"vue": "^2.5.11"
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions",
|
||||
"not ie <= 8"
|
||||
],
|
||||
"devDependencies": {
|
||||
"babel-core": "^6.26.0",
|
||||
"babel-loader": "^7.1.2",
|
||||
"babel-plugin-component": "^1.1.1",
|
||||
"babel-preset-env": "^1.6.0",
|
||||
"babel-preset-stage-3": "^6.24.1",
|
||||
"cross-env": "^5.0.5",
|
||||
"css-loader": "^0.28.7",
|
||||
"file-loader": "^1.1.4",
|
||||
"vue-loader": "^13.0.5",
|
||||
"vue-template-compiler": "^2.4.4",
|
||||
"webpack": "^3.6.0",
|
||||
"webpack-dev-server": "^2.9.1"
|
||||
}
|
||||
}
|
||||
BIN
JTopoInVue/static/bg.jpg
Normal file
BIN
JTopoInVue/static/bg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
82
JTopoInVue/webpack.config.js
Normal file
82
JTopoInVue/webpack.config.js
Normal file
@@ -0,0 +1,82 @@
|
||||
var path = require('path')
|
||||
var webpack = require('webpack')
|
||||
|
||||
module.exports = {
|
||||
entry: './main.js',
|
||||
output: {
|
||||
path: path.resolve(__dirname, './dist'),
|
||||
publicPath: '/dist/',
|
||||
filename: 'build.js'
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: [
|
||||
'vue-style-loader',
|
||||
'css-loader'
|
||||
],
|
||||
}, {
|
||||
test: /\.vue$/,
|
||||
loader: 'vue-loader',
|
||||
options: {
|
||||
loaders: {
|
||||
}
|
||||
// other vue-loader options go here
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.js$/,
|
||||
loader: 'babel-loader',
|
||||
exclude: /node_modules/
|
||||
},
|
||||
{
|
||||
test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
|
||||
loader: 'file-loader'
|
||||
},
|
||||
{
|
||||
test: /\.(png|jpg|gif|svg)$/,
|
||||
loader: 'file-loader',
|
||||
options: {
|
||||
name: '[name].[ext]?[hash]'
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
'vue$': 'vue/dist/vue.esm.js'
|
||||
},
|
||||
extensions: ['*', '.js', '.vue', '.json']
|
||||
},
|
||||
devServer: {
|
||||
historyApiFallback: true,
|
||||
noInfo: true,
|
||||
overlay: true
|
||||
},
|
||||
performance: {
|
||||
hints: false
|
||||
},
|
||||
devtool: '#eval-source-map'
|
||||
}
|
||||
|
||||
if (process.env.NODE_ENV === 'production') {
|
||||
module.exports.devtool = '#source-map'
|
||||
// http://vue-loader.vuejs.org/en/workflow/production.html
|
||||
module.exports.plugins = (module.exports.plugins || []).concat([
|
||||
new webpack.DefinePlugin({
|
||||
'process.env': {
|
||||
NODE_ENV: '"production"'
|
||||
}
|
||||
}),
|
||||
new webpack.optimize.UglifyJsPlugin({
|
||||
sourceMap: true,
|
||||
compress: {
|
||||
warnings: false
|
||||
}
|
||||
}),
|
||||
new webpack.LoaderOptionsPlugin({
|
||||
minimize: true
|
||||
})
|
||||
])
|
||||
}
|
||||
Reference in New Issue
Block a user