一、快速入门
- 使用CDN方式引入Vue3
- 使用CDN方式引入Element-Plus的样式文件和组件库
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入Vue3 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<!-- 引入element-plus样式文件 -->
<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
<!-- 引入element-plus组件库 -->
<script src="https://unpkg.com/element-plus"></script>
<!-- 引入axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<!-- 按钮 -->
<el-button type="primary">Primary</el-button>
<table>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>email</th>
</tr>
<tr v-for="(item, index) in userList">
<td>{{index + 1}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.email}}</td>
</tr>
</table>
</div>
<script>
const { createApp, ref } = Vue;
createApp({
setup() {
const userList = ref([])
return {
userList
}
},
created () {
this.showUserList()
},
methods: {
showUserList(){
//使用axios自定义配置，访问指定地址
const request = axios.create({
baseURL: 'http://localhost:9000'
})
request
.get('/user/allUsers')
.then((response) => {
console.log('数据获取成功', response.data)
this.userList = response.data
})
.catch((error) => {
console.log('数据获取失败', error)
})
}
}
// 全部引入ElementPlus
}).use(ElementPlus).mount('#app')
</script>
</body>
</html>
浏览器页面
