方法一：
要在普通HTML文件中使用Vue组件，你需要进行以下步骤：
1. 引入Vue框架：在HTML文件中的<head>标签内，添加以下代码来引入Vue框架的JavaScript文件。
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
你也可以将Vue框架的JavaScript文件下载到本地，并使用相对路径引入。
2.创建Vue实例：在HTML文件中的<body>标签内，创建一个<div>元素，作为Vue实例的挂载点。给这个<div>元素添加一个id属性，用于在Vue实例中引用。
<div id="app"></div>
3.编写Vue组件：在HTML文件中的<script>标签内，编写Vue组件的JavaScript代码。首先，创建一个Vue组件对象，定义组件的模板、数据和方法等。
<script>
// 创建Vue组件对象
var myComponent = Vue.component('my-component', {
template: '<div>{{ message }}</div>',
data: function() {
return {
message: 'Hello, Vue!'
};
}
});
</script>
现在，你可以在HTML文件中使用Vue组件了。在<div id="app">的范围内，可以直接使用你定义的Vue组件，如下所示：
<my-component></my-component>
Vue会将该组件渲染到对应的<div>中，并显示组件中定义的内容。
需要注意的是，Vue组件的代码可以放在单独的JavaScript文件中，然后在HTML文件中使用<script src="your-component.js"></script>来引入。这样可以更好地组织和管理代码。
方法二：
先引入vue.js
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
定义一个app
<div id="app"></div>这里引用的是Element-UI组件，使用CDN方式引用的组件不需要在VUE组件中注册，直接使用该组件即可。
引入Element-UI
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>然后是在script标签里编写代码，下面是一个示例代码
new Vue({
el:"#app",
methods:{
method_1(){
console.log("这是一个消息盒子方法")
this.$message({
message: '这是一个成功方法',
type: 'success'
});
}
}
})
我们在app里面调用测试一下
<div id="app">
<el-button @click="method_1">点我一下</el-button>
</div>
<script>
new Vue({
el:"#app",
methods:{
method_1(){
console.log("这是一个消息盒子方法")
this.$message({
message: '这是一个成功方法',
type: 'success'
});
}
}
})
</script>
特别提醒一下，任何以Vue为基础的组件必须在Vue的CDN之后引用！！
