首先，在進(jìn)行myeclipse集成vue的前提下，需要先安裝node.js和vue-cli腳手架工具。
npm install -g vue-cli接著，我們將在myeclipse中創(chuàng)建一個(gè)web項(xiàng)目。在項(xiàng)目上右鍵，選擇Properties->Project Facets，勾選Dynamic Web Module和Java。接下來(lái)，我們需要通過(guò)npm在項(xiàng)目中安裝vue和其它相關(guān)依賴。
npm install vue --save-dev在項(xiàng)目src/main/webapp目錄下，創(chuàng)建一個(gè)文件夾名為vue，用于存放.vue文件。在vue文件夾下創(chuàng)建一個(gè)HelloWorld.vue文件并添加以下代碼：
<template>
<div>
{{ message }}
</div>
</template>
<script>
export default {
data () {
return {
message: 'Hello, World!'
}
}
}
</script>接下來(lái)在index.jsp中引入.vue文件，并創(chuàng)建Vue實(shí)例，代碼如下：
<!DOCTYPE html>
<html>
<head>
<title>Vue in MyEclipse</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<div id="app"></div>
<script src="vue/vue.js"></script>
<script src="app.js"></script>
</body>
</html>import HelloWorld from './vue/HelloWorld.vue'
new Vue({
el: '#app',
components: {
HelloWorld
},
template: '<HelloWorld/>',
render: h =>h(HelloWorld)
});通過(guò)以上步驟，我們已經(jīng)成功地將Vue集成到MyEclipse中，現(xiàn)在就可以開始愉快地進(jìn)行Vue開發(fā)了。
上一篇css中中的url
下一篇css中為什么要加注釋