首先，需要安装Vue：
npm install vue然后，创建一个名为App.vue的文件，用于定义应用程序的主要内容。
<template>
<div>
<h1>{{ message }}</h1>
<input type="text" v-model="inputText" />
<button @click="addMessage">Add Message</button>
<ul>
<li v-for="(msg, index) in messages" :key="index">{{ msg }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Welcome to My Blog',
inputText: '',
messages: [],
};
},
methods: {
addMessage() {
if (this.inputText) {
this.messages.push(this.inputText);
this.inputText = '';
}
},
},
};
</script>接下来，在一个名为main.js的文件中，创建Vue实例并挂载到#app元素上。
import Vue from 'vue';
import App from './App.vue';
new Vue({
render: (h) => h(App),
}).$mount('#app');最后，在一个HTML文件中引入构建好的脚本，并添加一个具有唯一ID的<div>元素，用于挂载Vue应用程序。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue Demo</title>
</head>
<body>
<div id="app"></div>
<script src="dist/build.js"></script>
</body>
</html>接下来，可以运行Vue应用程序：
npm run build然后，在浏览器中打开HTML文件，就可以看到一个简单的Vue应用程序，用户可以输入消息并将其添加到列表中。
标签：文件,Vue,框架,demo,App,应用程序,vue,inputText From： https://blog.51cto.com/u_16246846/7424191