HTML使用Vue3+ElementPlus

源末coco

已于 2023-06-07 08:28:09 修改

阅读量2.9k

点赞数 2

文章标签： vue.js elementui 前端

于 2023-05-09 19:27:01 首次发布

本文链接：https://blog.csdn.net/weixin_58724261/article/details/130586652

版权

1.引入文件

element-plus基于vue3.0，所以必须导入vue3.0的js文件，然后再导入element-plus自身所需的js以及css文件，导入文件有两种方法：外部引用、下载本地使用

1.1 通过外部引用ElementPlus的css和js文件以及Vue3.0文件

<head>
  <!-- Import style -->
  <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
  <!-- Import Vue 3 -->
  <script src="//unpkg.com/vue@3"></script>
  <!-- Import component library -->
  <script src="//unpkg.com/element-plus"></script>
</head>

1.2将css和js文件下载到本地使用

直接在浏览器输入外部引用的地址，打开对应的css、js文件，然后新建文件将浏览器的内容复制进去，这样就把css和js文件下载到本地了

按照以上步骤把3个文件都复制到本地

2.HTML文件

新建一个普通的HTML文件，引入3个js和css文件，参考步骤1

使用vue：

<body>
		<div id="app">
			
		</div>
		
		<script>
			const App = {
				data(){
					return{
					
					}
				}
			}
			
			const App2 = Vue.createApp(App)			
			App2.mount(app)
		</script>
	</body>

使用element-plus标签：

使用element-plus标签时先让vue识别它，然后从官网上复制需要的组件代码

const App2 = Vue.createApp(App)
App2.use(ElementPlus)
App2.mount(app)

完整代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		 <!-- Import style -->
		 
		  
		    <link rel="stylesheet" href="css/element-plus.css" />
		    <!-- Import Vue 3 -->
		    <script src="js/vue.global.prod.js"></script>
		    <!-- Import component library -->
		    <script src="js/element-plus.js"></script>
		 
		  
	</head>
	<body>
		<div id="app">
			 <el-row class="mb-4">
			    <el-button>Default</el-button>
			    <el-button type="primary">Primary</el-button>
			    <el-button type="success">Success</el-button>
			    <el-button type="info">Info</el-button>
			    <el-button type="warning">Warning</el-button>
			    <el-button type="danger">Danger</el-button>
			  </el-row>
		</div>
		
		<script>
			const App = {
				data(){
					return{
					
					}
				}
			}
			
			const App2 = Vue.createApp(App)
			App2.use(ElementPlus)
			App2.mount(app)
		</script>
	</body>
</html>