个人第一个vue插件 —— vue-justgage示例详解
前言
去年十月的时候接到一个任务，让我在vue项目中引入justgage这个插件，具体过程有点艰辛，但最后仍是顺利解决了。最近不是特别忙，因此就想把这个插件改形成vue能够直接使用的样子。源码和文档可在github上查看，也能够直接使用npm安装。javascript
这篇文章主要是对justgage的官方示例进行详细介绍，仔细分析每个示例与用法。html
代码解析
可在github地址查看源码，也能够拉取到本地：vue
git clone https://github.com/Peggy7/vue-justgage.git
而后：java
npm install npm run dev
就能够启动项目里，里面一共有16个例子，下面就来详细分析每一个例子。git
1. defaults(基本)
要使用这个插件首先要指定一个id，并在初始化时传入相应的id名，经过this.$ref来调用draw方法初始化插件，经过传入配置项来改变插件的外观。其中还可使用data-属性名来指定默认值，data-属性名这种传值方式会覆盖实例化时传入的配置。github
这就是插件最基本最简单的用法。npm
<template>
<div class="container">
<vue-justgage ref="gg1" id="gg1" class="gauge"></vue-justgage>
<vue-justgage ref="gg2" id="gg2" data-value="25" class="gauge"></vue-justgage>
</div>
</template>
<script>
export default {
data() {
return {
dflt: {
min: 0,
max: 200,
donut: true,
gaugeWidthScale: 0.6,
counter: true,
hideInnerShadow: true
}
}
},
mounted() {
var gg1 = this.$refs.gg1.draw({
id: 'gg1',
value: 125,
title: 'javascript call',
defaults: this.dflt
});
var gg2 = this.$refs.gg2.draw({
id: 'gg2',
title: 'data-attributes',
defaults: this.dflt
});
}
}
</script>
2. Auto Adjust(自动调整)
这个例子并无很特殊的用法，主要是想告诉咱们justgage会自动适配容器的大小，在缩放页面的时候能够始终保持很是美观的样子。segmentfault
<template>
<div class="container">
<vue-justgage ref="g1" id="g1"></vue-justgage>
<vue-justgage ref="g2" id="g2"></vue-justgage>
<vue-justgage ref="g3" id="g3"></vue-justgage>
<vue-justgage ref="g4" id="g4"></vue-justgage>
<p>
JustGage auto-adjusts to the size of containing element. And to the screen zoom level. And screen density. Nice. This means you’ll get clean, sharp and nice looking gauge at all times. Try zooming the page to see the results.
</p>
</div>
</template>
<script>
export default {
data() {
return {
g1: null,
g2: null,
g3: null,
g4: null
}
},
mounted() {
this.g1 = this.$refs.g1.draw({
id: "g1",
value: this.getRandomInt(0, 100),
min: 0,
max: 100,
title: "Big Fella",
label: "pounds"
});
this.g2 = this.$refs.g2.draw({
id: "g2",
value: this.getRandomInt(0, 100),
min: 0,
max: 100,
title: "Small Buddy",
label: "oz"
});
this.g3 = this.$refs.g3.draw({
id: "g3",
value: this.getRandomInt(0, 100),
min: 0,
max: 100,
title: "Tiny Lad",
label: "oz"
});
this.g4 = this.$refs.g4.draw({
id: "g4",
value: this.getRandomInt(0, 100),
min: 0,
max: 100,
title: "Little Pal",
label: "oz"
});
setInterval(() => {
this.g1.refresh(this.getRandomInt(50, 100));
this.g2.refresh(this.getRandomInt(50, 100));
this.g3.refresh(this.getRandomInt(0, 50));
this.g4.refresh(this.getRandomInt(0, 50));
}, 2500);
}
}
</script>
3. Counter(计数)
若是将counter属性设置为true，则value值会从0开始增长到指定值，有一个动画效果。bash
<template>
<div class="container">
<vue-justgage ref="g1" id="g1" class="gauge"></vue-justgage>
<a href="#" id="g1_refresh" @click="random">Random Refresh</a>
</div>
</template>
<script>
export default {
data() {
return {
g1: null
}
},
mounted() {
this.g1 = this.$refs.g1.draw({
id: "g1",
value: 72,
min: 0,
max: 100,
donut: true,
gaugeWidthScale: 0.6,
counter: true,
hideInnerShadow: true
});
},
methods: {
random() {
this.g1.refresh(this.getRandomInt(0, 100));
}
}
}
</script>
4. Custom Interval(自定义间隔)
咱们能够随意的设置最大值和最小值，value的值和颜色根据范围内的百分比自动调整，若是value超出设定地范围也不用担忧，justgage会自动作处理。app
<template>
<div class="container">
<vue-justgage ref="g1" id="g1"></vue-justgage>
<vue-justgage ref="g2" id="g2"></vue-justgage>
<vue-justgage ref="g3" id="g3"></vue-justgage>
<p>
You need to measure, say, between 350 and 980? No problem, just tell it to justGage. Displayed value and color are calculated as a percentage in defined range, with optional min and max labels shown.
</p>
<p>
Also, if displayed value is out of range, relax and kick your feet up - justGage will take care of it for you.
</p>
</div>
</template>
<script>
export default {
data() {
return {
g1: null,
g2: null,
g3: null
}
},
mounted() {
this.g1 = this.$refs.g1.draw({
id: "g1",
value: this.getRandomInt(350, 980),
min: 350,
max: 980,
title: "Lone Ranger",
label: "miles traveled"
});
this.g2 = this.$refs.g2.draw({
id: "g2",
value: 32,
min: 50,
max: 100,
title: "Empty Tank",
label: ""
});
this.g3 = this.$refs.g3.draw({
id: "g3",
value: 120,
min: 50,
max: 100,
title: "Meltdown",
label: ""
});
setInterval(() => {
this.g1.refresh(this.getRandomInt(350, 980));
this.g2.refresh(this.getRandomInt(0, 49));
this.g3.refresh(this.getRandomInt(101, 200));
}, 2500);
}
}
</script>
5. Custom Node(自定义容器节点)
经过parentNode属性指定容器节点，让仪表盘可在本身指望的地方展现。
<template>
<div>
<div ref="cont" id="cont" class="container">
<vue-justgage v-show="showNode1" ref="gauge1" class="gauge"></vue-justgage>
<vue-justgage ref="gauge2" id="gauge2" class="gauge"></vue-justgage>
<vue-justgage ref="gauge3" id="gauge3" class="gauge" data-title="#3" data-value="75" data-counter="true"></vue-justgage>
<vue-justgage v-show="showNode4" ref="gauge4" class="gauge" data-title="#4" data-value="100" data-counter="true"></vue-justgage>
</div>
<div class="container">
<button type="button" id="g1_show" @click="showG1">Show G1</button>
<button type="button" id="g4_show" @click="showG4">Show G4</button>
</div>
<div class="container">
<button type="button" id="g1_refresh" @click="refresh(1)">Refresh G1</button>
<button type="button" id="g2_refresh" @click="refresh(2)">Refresh G2</button>
<button type="button" id="g3_refresh" @click="refresh(3)">Refresh G3</button>
<button type="button" id="g4_refresh" @click="refresh(4)">Refresh G4</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
gauge1: null,
gauge2: null,
gauge3: null,
gauge4: null,
showNode1: false,
showNode4: false
}
},
mounted() {
this.gauge2 = this.$refs.gauge2.draw({
id: "gauge2",
title: "#2",
value: 50,
min: 0,
max: 100,
humanFriendly: false,
decimals: 0,
counter: true
});
this.gauge3 = this.$refs.gauge3.draw({
id: "gauge3"
});
},
methods: {
showG1() {
if(this.showNode1) {
return;
}else {
this.showNode1 = true;
this.gauge1 = this.$refs.gauge1.draw({
parentNode: this.$refs.gauge1.$el,
width: 150,
height: 150,
title: "#1",
value: 25,
min: 0,
max: 100,
decimals: 0,
counter: true
});
}
},
showG4() {
if(this.showNode4) {
return;
}else {
this.showNode4 = true;
this.gauge4 = this.$refs.gauge4.draw({
parentNode: this.$refs.gauge4.$el,
width: 150,
height: 150
});
}
},
refresh(index) {
var gauge = {
gauge1: this.gauge1,
gauge2: this.gauge2,
gauge3: this.gauge3,
gauge4: this.gauge4
}
if(gauge[`gauge${index}`]) {
gauge[`gauge${index}`].refresh(this.getRandomInt(0, 100));
}
}
}
}
</script>
6. Custom Sectors(自定义仪表盘颜色)
value值展现的颜色能够自定义，经过指定customSectors，有3个可选值：color、lo、hi。设置在lo和hi之间的部分显示为color。
<template>
<div class="container">
<vue-justgage ref="gg1" id="gg1" class="gauge"></vue-justgage>
<p id="gg1_text">0-50 is green, 51-100 is red</p>
<a href="#" id="gg1_refresh" class="button grey" @click="random">Random Refresh</a>
</div>
</template>
<script>
export default {
data() {
return {
gg1: null
}
},
mounted() {
this.gg1 = this.$refs.gg1.draw({
id: "gg1",
value : 72.15,
min: 0,
max: 100,
decimals: 2,
gaugeWidthScale: 0.6,
customSectors: [{
color : "#00ff00",
lo : 0,
hi : 50
},{
color : "#ff0000",
lo : 50,
hi : 100
}],
counter: true
});
},
methods: {
random() {
this.gg1.refresh(this.getRandomInt(0, 100));
}
}
}
</script>
7. Custom Render Function(自定义值的渲染方式)
value值不止能够显示为数字，还能够自定义在某个范围内显示什么值或文字。
<template>
<div class="container">
<vue-justgage ref="gg1" id="gg1" style="width: 200px; height: 150px; margin: 0 auto;"></vue-justgage>
<a href="#" id="gg1_refresh" class="button grey" @click="random">Random Refresh</a>
</div>
</template>
<script>
export default {
data() {
return {
gg1: null
}
},
mounted() {
this.gg1 = this.$refs.gg1.draw({
id: "gg1",
value: 50,
min: 0,
max: 100,
title: "Target",
label: "temperature",
textRenderer: this.customValue
});
},
methods: {
customValue(val) {
if (val < 50) {
return 'low';
} else if (val > 50) {
return 'high';
} else if (val === 50) {
return 'ideal';
}
},
random() {
this.gg1.refresh(this.getRandomInt(0, 100));
}
}
}
</script>
8. Customize Style(自定义仪表盘外观)
若是不满意justgage的默认样式，能够自定义本身喜欢的样子，经过修改仪表盘宽度，颜色和阴影，级别颜色，标题颜色，值，最小值和最大值等。
<template>
<div class="container">
<vue-justgage ref="g1" id="g1"></vue-justgage>
<vue-justgage ref="g2" id="g2"></vue-justgage>
<vue-justgage ref="g3" id="g3"></vue-justgage>
<vue-justgage ref="g4" id="g4"></vue-justgage>
<vue-justgage ref="g5" id="g5"></vue-justgage>
<vue-justgage ref="g6" id="g6"></vue-justgage>
<p>
Not digging default style? Then mock your own, Picasso! JustGage features bunch of styling options including gauge width, gauge color and shadow, gauge level colors, colors for title, value, min & max etc.
</p>
<p>
Check non-minified version of justgage.js for list of all setup parameters.
</p>
</div>
</template>
<script>
export default {
data() {
return {
g1: null,
g2: null,
g3: null,
g4: null,
g5: null,
g6: null
}
},
mounted() {
this.g1 = this.$refs.g1.draw({
id: "g1",
value: this.getRandomInt(0, 100),
min: 0,
max: 100,
title: "Custom Width",
label: "",
gaugeWidthScale: 0.2
});
this.g2 = this.$refs.g2.draw({
id: "g2",
value: this.getRandomInt(0, 100),
min: 0,
max: 100,
title: "Custom Shadow",
label: "",
shadowOpacity: 1,
shadowSize: 5,
shadowVerticalOffset: 10
});
this.g3 = this.$refs.g3.draw({
id: "g3",
value: this.getRandomInt(0, 100),
min: 0,
max: 100,
title: "Custom Colors",
label: "",
levelColors: [
"#00fff6",
"#ff00fc",
"#1200ff"
]
});
this.g4 = this.$refs.g4.draw({
id: "g4",
value: this.getRandomInt(0, 100),
min: 0,
max: 100,
title: "Hide Labels",
hideMinMax: true
});
this.g5 = this.$refs.g5.draw({
id: "g5",
value: this.getRandomInt(0, 100),
min: 0,
max: 100,
title: "Animation Type",
label: "",
startAnimationTime: 2000,
startAnimationType: ">",
refreshAnimationTime: 1000,
refreshAnimationType: "bounce"
});
this.g6 = this.$refs.g6.draw({
id: "g6",
value: this.getRandomInt(0, 100),
min: 0,
max: 100,
title: "Minimal",
label: "",
hideMinMax: true,
gaugeColor: "#fff",
levelColors: ["#000"],
hideInnerShadow: true,
startAnimationTime: 1,
startAnimationType: "linear",
refreshAnimationTime: 1,
refreshAnimationType: "linear"
});
setInterval(() => {
this.g1.refresh(this.getRandomInt(0, 100));
this.g2.refresh(this.getRandomInt(0, 100));
this.g3.refresh(this.getRandomInt(0, 100));
this.g4.refresh(this.getRandomInt(0, 100));
this.g5.refresh(this.getRandomInt(0, 100));
this.g6.refresh(this.getRandomInt(0, 100));
}, 2500);
}
}
</script>
9. Font Options(字体选项)
仪表盘上的各类字体样式也能够自定义。
<template>
<div class="container">
<vue-justgage ref="g1" id="g1" class="gauge"></vue-justgage>
<a href="#" id="g1_refresh" @click="random">Random Refresh</a>
</div>
</template>
<script>
export default {
data() {
return {
g1: null
}
},
mounted() {
this.g1 = this.$refs.g1.draw({
id: "g1",
title: "Font Options",
value: 72,
min: 0,
max: 100,
gaugeWidthScale: 0.6,
counter: true,
titleFontColor: "red",
titleFontFamily: "Georgia",
titlePosition: "below",
valueFontColor: "blue",
valueFontFamily: "Georgia"
});
},
methods: {
random() {
this.g1.refresh(this.getRandomInt(0, 100));
}
}
}
</script>
10. Format Number(格式化数字)
将formatNumber设置为true的时候，数字会自动格式化，例如10000会自动变成10,000的形式。
<template>
<div class="container">
<vue-justgage ref="gg1" id="gg1" class="gauge"></vue-justgage>
<a href="#" id="gg1_refresh" @click="random">Random Refresh</a>
</div>
</template>
<script>
export default {
data() {
return {
gg1: null
}
},
mounted() {
this.gg1 = this.$refs.gg1.draw({
id: "gg1",
value: 40960,
min: 1024,
max: 1000000,
gaugeWidthScale: 0.6,
counter: true,
formatNumber: true
});
},
methods: {
random() {
this.gg1.refresh(this.getRandomInt(1024, 1000000));
}
}
}
</script>
11. Html5 Data-attribute Setup(data-attribute设置默认值)
除了在option里指定属性，还能够在标签上使用data-attribute的形式设置默认值。
<template>
<div class="container">
<vue-justgage ref="gg1" id="gg1" class="gauge" data-value="1200" data-min="0" data-max="1000000" data-gaugeWidthScale="0.6"></vue-justgage>
<input type="button" id="gg1_refresh" class="btn" value="Random Refresh" @click="random" />
</div>
</template>
<script>
export default {
data() {
return {
gg1: null
}
},
mounted() {
this.gg1 = this.$refs.gg1.draw({
id: "gg1",
formatNumber: true,
counter: true
});
},
methods: {
random() {
this.gg1.refresh(this.getRandomInt(0, 1000000));
}
}
}
</script>
12. Human Friendly Numbers(人类更容易理解的数字)
若是将humanFriendly设置为true，数字就会展现为人类更容易理解的形式，例如10000将会显示为10k。
<template>
<div class="container">
<vue-justgage ref="gg1" id="gg1" style="width: 200px; height: 150px;margin: 0 auto;"></vue-justgage>
<a href="#" id="gg1_refresh" class="button grey" @click="random">Random Refresh</a>
</div>
</template>
<script>
export default {
data() {
return {
gg1:null
}
},
mounted() {
this.gg1 = this.$refs.gg1.draw({
id: "gg1",
value: 1024,
min: 0,
max: 10000,
title: "Target",
label: "",
humanFriendly: true,
startAnimationTime: 10000,
refreshAnimationTime: 10000
});
},
methods: {
random() {
this.gg1.refresh(this.getRandomInt(0, 1000000));
}
}
}
</script>
13. Pointer(指针)
自定义指针的样式，经过配置pointerOptions，可选项有：toplength、bottomlength、bottomwidth、color、stroke、stroke_width、stroke_linecap。
<template>
<div>
<div class="wrapper">
<div class="box">
<vue-justgage ref="g1" id="g1" class="gauge"></vue-justgage>
</div>
<div class="box">
<vue-justgage ref="g2" id="g2" class="gauge"></vue-justgage>
</div>
<div class="box">
<vue-justgage ref="g3" id="g3" class="gauge"></vue-justgage>
</div>
<div class="box">
<vue-justgage ref="g4" id="g4" class="gauge"></vue-justgage>
</div>
</div>
<div class="container">
<button type="button" id="gauge_refresh" @click="refresh">Refresh Gauges</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
g1: null,
g2: null,
g3: null,
g4: null
}
},
mounted() {
this.g1 = this.$refs.g1.draw({
id: 'g1',
value: 65,
min: 0,
max: 100,
symbol: '%',
pointer: true,
gaugeWidthScale: 0.6,
customSectors: [{
color: '#ff0000',
lo: 50,
hi: 100
}, {
color: '#00ff00',
lo: 0,
hi: 50
}],
counter: true
});
this.g2 = this.$refs.g2.draw({
id: 'g2',
value: 45,
min: 0,
max: 100,
symbol: '%',
pointer: true,
pointerOptions: {
toplength: -15,
bottomlength: 10,
bottomwidth: 12,
color: '#8e8e93',
stroke: '#ffffff',
stroke_width: 3,
stroke_linecap: 'round'
},
gaugeWidthScale: 0.6,
counter: true
});
this.g3 = this.$refs.g3.draw({
id: 'g3',
value: 40,
min: 0,
max: 100,
symbol: '%',
donut: true,
pointer: true,
gaugeWidthScale: 0.4,
pointerOptions: {
toplength: 10,
bottomlength: 10,
bottomwidth: 8,
color: '#000'
},
customSectors: [{
color: "#ff0000",
lo: 50,
hi: 100
}, {
color: "#00ff00",
lo: 0,
hi: 50
}],
counter: true
});
this.g4 = this.$refs.g4.draw({
id: 'g4',
value: 70,
min: 0,
max: 100,
symbol: '%',
pointer: true,
pointerOptions: {
toplength: 8,
bottomlength: -20,
bottomwidth: 6,
color: '#8e8e93'
},
gaugeWidthScale: 0.1,
counter: true
});
},
methods: {
refresh() {
this.g1.refresh(this.getRandomInt(0, 100));
this.g2.refresh(this.getRandomInt(0, 100));
this.g3.refresh(this.getRandomInt(0, 100));
this.g4.refresh(this.getRandomInt(0, 100));
}
}
}
</script>
14. Refresh Maximum(设置最大值)
justgage能够动态的从新设置最大值。
<template>
<div class="container">
<vue-justgage ref="g1" id="g1" class="gauge"></vue-justgage>
<a href="#" id="g1_refresh" class="button grey" @click="random">Random Refresh</a>
<br />
<a href="#" id="g1_setmax100" class="button grey" @click="setMax(100)">Set Max 100</a>
<a href="#" id="g1_setmax200" class="button grey" @click="setMax(200)">Set Max 200</a>
<a href="#" id="g1_setmax400" class="button grey" @click="setMax(400)">Set Max 400</a>
</div>
</template>
<script>
export default {
data() {
return {
g1: null
}
},
mounted() {
this.g1 = this.$refs.g1.draw({
id: "g1",
title: "Max is 100.",
value: 50,
min: 0,
max: 100,
decimals: 0,
gaugeWidthScale: 0.6
});
},
methods: {
random() {
this.g1.refresh(this.getRandomInt(0, 100));
},
setMax(num) {
var text = new Map([
[100, "Max is 100."],
[200, "Whoops, max jumped to 200."],
[400, "Blimey, max blasted to 400!"]
]);
this.g1.refresh(this.g1.originalValue, num);
this.g1.txtTitle.attr({
"text": text.get(num)
});
}
}
}
</script>
15. Responsive Gauges(自适应)
将relativeGaugeSize属性设置为true，仪表盘的大小会根据容器大小自适应。
<template>
<div class="container">
<div class="wrapper clear">
<vue-justgage ref="g1" id="g1" class="gauge"></vue-justgage>
<vue-justgage ref="g2" id="g2" class="gauge"></vue-justgage>
<vue-justgage ref="g3" id="g3" class="gauge"></vue-justgage>
</div>
</div>
</template>
<script>
export default {
data() {
return {
}
},
mounted() {
var g1 = this.$refs.g1.draw({
id: "g1",
value: this.getRandomInt(0, 1000),
min: 0,
max: 1000,
relativeGaugeSize: true,
donut: true
});
var g2 = this.$refs.g2.draw({
id: "g2",
value: this.getRandomInt(0, 100),
min: 0,
max: 100,
title: "Very long title",
relativeGaugeSize: true,
donut: true
});
var g3 = this.$refs.g3.draw({
id: "g3",
value: this.getRandomInt(0, 100),
min: 0,
max: 100,
title: "Very long title",
label: "label",
relativeGaugeSize: true,
donut: true
});
}
}
</script>
16. Reverse(反转最大最小值)
将reverse设置为true，最大最小值的位置会反过来。
<template>
<div>
<div class="wrapper">
<div class="box">
<vue-justgage ref="g1" id="g1" class="gauge"></vue-justgage>
</div>
<div class="box">
<vue-justgage ref="g2" id="g2" class="gauge"></vue-justgage>
</div>
<div class="box">
<vue-justgage ref="g3" id="g3" class="gauge"></vue-justgage>
</div>
<div class="box">
<vue-justgage ref="g4" id="g4" class="gauge"></vue-justgage>
</div>
</div>
<div class="container">
<button type="button" id="gauge_refresh" @click="refresh">Refresh Gauges</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
g1: null,
g2: null,
g3: null,
g4: null
}
},
mounted() {
this.g1 = this.$refs.g1.draw({
id: 'g1',
value: 65,
min: 0,
max: 100,
reverse: true,
gaugeWidthScale: 0.6,
customSectors: [{
color: '#ff0000',
lo: 50,
hi: 100
}, {
color: '#00ff00',
lo: 0,
hi: 50
}],
counter: true
});
this.g2 = this.$refs.g2.draw({
id: 'g2',
value: 45,
min: 0,
max: 500,
reverse: true,
gaugeWidthScale: 0.6,
counter: true
});
this.g3 = this.$refs.g3.draw({
id: 'g3',
value: 25000,
min: 0,
max: 100000,
humanFriendly : true,
reverse: true,
gaugeWidthScale: 1.3,
customSectors: [{
color: "#ff0000",
lo: 50000,
hi: 100000
}, {
color: "#00ff00",
lo: 0,
hi: 50000
}],
counter: true
});
this.g4 = this.$refs.g4.draw({
id: 'g4',
value: 90,
min: 0,
max: 100,
symbol: '%',
reverse: true,
gaugeWidthScale: 0.1,
counter: true
});
},
methods: {
refresh() {
this.g1.refresh(this.getRandomInt(0, 100));
this.g2.refresh(this.getRandomInt(0, 100));
this.g3.refresh(this.getRandomInt(0, 100000));
this.g4.refresh(this.getRandomInt(0, 100));
}
}
}
</script>
总结
几乎justgage的全部用法都能在例子中找到相应的展现，若是不是须要深刻研究或掌握插件，简单的看一看文档就能够快速上手。
最后感谢每个使用我写的插件的人~
有任何问题均可以留言或私信或在github上告诉我。
相关文章
- 1. 开发一个Vue插件
- 2. VUE（一）.创建一个VUE Demo示例
- 3. 初学vue，个人第一个程序
- 4. Vue的第一个实例
- 5. 制做一个vue插件
- 6. vue 封装一个插件
- 7. ionic 第一个APP示例
- 8. 第一个maven示例-helloworld
- 9. 2、OpenSceneGraph3.4第一个示例
- 10. SpringMVC第一个示例
- 更多相关文章...
- • 第一个Hibernate程序 - Hibernate教程
- • 第一个Spring程序 - Spring教程
- • SpringBoot中properties文件不能自动提示解决方法
- • IntelliJ IDEA安装代码格式化插件
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. Window下Ribbit MQ安装
- 2. Linux下Redis安装及集群搭建
- 3. shiny搭建网站填坑战略
- 4. Mysql8.0.22安装与配置详细教程
- 5. Hadoop安装及配置
- 6. Python爬虫初学笔记
- 7. 部署LVS-Keepalived高可用集群
- 8. keepalived+mysql高可用集群
- 9. jenkins 公钥配置
- 10. HA实用详解
欢迎关注本站公众号,获取更多信息
相关文章
- 1. 开发一个Vue插件
- 2. VUE（一）.创建一个VUE Demo示例
- 3. 初学vue，个人第一个程序
- 4. Vue的第一个实例
- 5. 制做一个vue插件
- 6. vue 封装一个插件
- 7. ionic 第一个APP示例
- 8. 第一个maven示例-helloworld
- 9. 2、OpenSceneGraph3.4第一个示例
- 10. SpringMVC第一个示例