HTML中直接使用vue 打造个人工具，高效开发
对于程序员，日常开发过程中，总会有一些“体力活”需要做，本着一种“懒人”思想，那就必须要将一切自动化起来，为了早点下班回家不是嘛？
因此，需要打造自己趁手的工具，无疑，用html的方式是最简洁的，直接在浏览器中运行，html 修改性极强。
保持持续更新。
index.html内容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tools</title>
<link rel="stylesheet" href="https://cdn.staticfile.net/element-plus/2.5.1/index.css" />
<!-- Import Vue 3 -->
<script src="https://cdn.staticfile.net/vue/3.3.4/vue.global.js"></script>
<!-- Import component library -->
<script src='https://cdn.staticfile.net/element-plus/2.5.1/index.full.min.js'></script>
<!-- Import component library -->
<script src='https://cdn.staticfile.net/axios/1.6.5/axios.min.js'></script>
<script src='https://cdn.staticfile.net/element-plus-icons-vue/2.3.1/global.iife.min.js'></script>
<script src='https://cdn.staticfile.net/jquery/3.7.1/jquery.min.js'></script>
<script src="https://unpkg.com/http-vue-loader"></script>
</head>
<body>
<div id="app">
<el-row class="mb-4">
<el-button icon="edit" type="primary" @click="handle">提示</el-button>
</el-row>
<!-- 按钮 -->
<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>
<!-- stripe斑马条纹不起作用，我也不知道为啥 -->
<el-table border stripe="true" :data="userList" style="width: 100%">
<!-- 不要忘记末尾标签 </el-table-column>，否则会显示出错-->
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column type="index" label="" width="50"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="age" label="年龄" width="180"></el-table-column>
<el-table-column prop="email" label="邮箱"></el-table-column>
<el-table-column prop="createTime" label="创建时间"></el-table-column>
<el-table-column prop="updateTime" label="更改时间"></el-table-column>
</el-table>
</div>
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :ellipsis="false"
@select="handleSelect">
<el-menu-item index="0">清风徐来</el-menu-item>
<div class="flex-grow"></div>
<el-menu-item index="1">Processing Center</el-menu-item>
<el-sub-menu index="2">
<template #title>Workspace</template>
<el-menu-item index="2-1">item one</el-menu-item>
<el-menu-item index="2-2">item two</el-menu-item>
<el-menu-item index="2-3">item three</el-menu-item>
<el-sub-menu index="2-4">
<template #title>item four</template>
<el-menu-item index="2-4-1">item one</el-menu-item>
<el-menu-item index="2-4-2">item two</el-menu-item>
<el-menu-item index="2-4-3">item three</el-menu-item>
</el-sub-menu>
</el-sub-menu>
</el-menu>
<el-button @click="show">我是 show</el-button>
<el-button @click="open2">我是 open2</el-button>
<el-date-picker v-model="value1" type="datetime" placeholder="请选择日期"
format="YYYY/MM/DD HH:mm:ss"></el-date-picker>
<com-a></com-a>
<com-b></com-b>
</div>
</body>
<script>
const { createApp, ref } = Vue
const vue = Vue
const { defineAsyncComponent } = Vue
const el = ElementPlus
const ElMessage = el.ElMessage
const APP = createApp({
setup() {
const handle = () => {
ElementPlus.ElMessage({
message: '点击！',
type: 'success',
})
// load json file.
// $.getJSON("test.json", function(data) {
// $.each(data.data, function(i, val){
// console.log(i + "--" + val);
// });
// });
fetch('test.json')
.then((res) => {return res.json(); })
.then((data) => {
console.log(JSON.stringify(data));
})
}
const userList = ref([])
const open2 = () => {
ElMessage({
message: 'Congrats, this is a success message.',
type: 'success',
})
}
const show = () => {
ElMessage({
message: 'Im show.',
type: 'success',
})
}
const value1 = ref('')
const activeIndex = ref('1')
const handleSelect = (key, keyPath) => {
console.log(key, keyPath)
}
return {
handle,
userList,
show,
open2,
activeIndex,
handleSelect,
value1
}
},
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)
})
}
}
})
APP.component('edit', ElementPlusIconsVue.Edit)
APP.component('com-a', defineAsyncComponent(httpVueLoader('./tpl1.vue')));
APP.component('com-b', defineAsyncComponent(httpVueLoader('./tpl2.vue')));
APP.use(ElementPlus).mount('#app')
</script>
</html>
tpl1.vue 内容如下
<template>
<div class="test">
<p>{{name}}</p>
<p>{{state}}</p>
</div>
</template>
<script>
module.exports = {
name:'test',
data(){
return{
name:222
}
},
props:{
state:{
type:String
}
}
}
</script>
<style>
</style>
tpl2内容如下
<template>
<h2>组件B</h2>
</template>
<script>
module.exports = {
}
</script>
<style scoped>
</style>
test.json内容如下：
{
"data":"bbbb"
}
浙公网安备 33010602011771号