vue3+elementui微型框架（无需安装任何环境即可使用）

钱先生110

已于 2022-10-29 16:20:01 修改

阅读量2.1k

点赞数 1

分类专栏：前端文章标签： elementui vue.js javascript html5 node.js

于 2022-10-29 15:58:56 首次发布

本文链接：https://blog.csdn.net/u010077387/article/details/127587655

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

项目介绍

这段时间在开发一个小工具，这个工具需要内嵌一个Http-server，通过内网访问展示一些页面。之前做过一次vue2的网站开发，让我对vue-cli开发印象并不太好，一个demo上百M，而我的页面并没有太多。不过呢，我喜欢用html嵌入vue.js的方式开发小工具，但这种方式缺陷是不能使用xxx.vue的页面。所以查询网站，知道了vue3-sfc-loader.js，访问某个页面时，可以直接加载xxx.vue页面文件。所以才有了下面的微型框架。和vue-cli以及cue-vite对比，主要是没有了热重载功能，所以只能修改代码后，浏览器手动刷新下看效果，小项目也够用了。

vue3+elementui微型框架

vue3+elementui微型框架下载

上面压缩包里包含了一个最小的例子（vue3+vue-router + elementui + axios）和一个HttpServer.exe(仅用于开发)。开发环境无需Node，推荐Vscode+Vue插件作为IDE。包含HttpServer.exe的压缩包仅为3M，但所有功能和官方完全一致，不存在任何缩水。

文件截图
在这里插入图片描述

下面为启动HttpServer.exe截图，以及访问127.0.0.1:8080的效果，修改vue代码后，不需要重启HttpServer.exe，刷新浏览器就能看到效果了，最下面有Home页面的vue代码

static/sys文件夹介绍

axios.min.js : http请求库(ajax请求)
element.js ： element-ui组件库
element.css ： element-ui组件样式库
vue-router.js ：页面路由跳转库
vue.js ：vue3组件库
vue3-sfc-loader.js ：远程vue文件加载库，它是实现无node环境的vue3
layout.vue ：这个是布局页面，可以做一些自定义的头部和底部等，里面的承载这各个页面内容
以上的库均来自各家官方，大家可以下载最新版进行同名替换

static/pages文件夹介绍

这里面就是我们主要工作的地方了，不用介绍了

static/com文件夹介绍

我把vue自定义组件和一些公共的js文件放在这里，大家可以根据自己习惯

HttpServer.exe介绍

用于前端开发的server，127.0.0.1:8080，只有一个get请求/test，用于页面中的http请求例子

index.html介绍（一切的开始）

head中的链接文件，都是官方下载下来的，文件位置在static/sys中

<script src="static/sys/vue.js"></script>
<script src="static/sys/vue-router.js"></script>
<script src="static/sys/vue3-sfc-loader.js"></script>
<script src="static/sys/axios.min.js"></script>
<script src="static/sys/element.js"></script>
<link rel="stylesheet" href="static/sys/element.css" />

注册页面路由

//index.html中该段为注册页面路由router.push/replace/append，参考例子，也可以在ui中使用<router-link>组件
let routes = [
    { path: '/', component: loadVueFile('static/pages/index.vue') },
    { path: '/page2', component: loadVueFile('static/pages/page2.vue') },
]

全局变量和全局ui响应变量建立

//全局变量，ref的为ui响应的全局变量,vue中,js读写this.vx.test.value=11, ui中使用不需要this
app.config.globalProperties.vx = {
    v1:100,
    v2: Vue.ref(0),
    dictest: Vue.ref({}),
}

Home页代码，是不是看不出：这是在html中使用的啊

//static/pages/index.vue
<template>
    <div>
        <h1>这是Home页面</h1>
        <el-row class="mb-4">
            <el-button type="primary" @click="httpGet">Get请求</el-button>
            <el-button type="success" @click="$router.push('/page2')">页面跳转</el-button>
            <el-button type="danger" @click="vx.test.value++">全局变量+1</el-button>
            <el-button type="success" @click="importjs">读取服务器端js文件内容</el-button>
        </el-row>

        <div style="margin:20px ;">
            <el-input v-model="vx.test.value" placeholder="Please input" />
        </div>

        <div style="margin:20px ;">
            <el-input v-model="msg" placeholder="http请求返回的消息" />
        </div>

        <div style="margin:20px ;">
            <el-input v-model="jsdata" placeholder="这是js文件中的数据" />
        </div>

        <addressComponent></addressComponent>

    </div>
</template>
  
<script>
import addressComponent from "static/com/addressComponent.vue"
//js文件名需要改为mjs
import {testDta} from "static/com/test.mjs"
export default {
    components: { addressComponent },
    data() {
        return {
            show: false,
            msg: "",
            jsdata:""
        }
    },
    mounted() {
        console.log("这是全局变量",this.vx.test.value);
    },
    methods: {
        httpGet() {
            axios.get('/test').then((res) => {
                this.msg=res.data
            })
        },
        importjs(){
            this.jsdata=JSON.stringify(testDta)
        }
    }
}
</script>