传统后端程序不使用Node.JS依然要搞Element UI

最新推荐文章于 2023-04-16 22:13:17 发布

小流至江河

最新推荐文章于 2023-04-16 22:13:17 发布

阅读量1.3k

点赞数 6

分类专栏：前端知识文章标签： ElementUI Vue

本文链接：https://blog.csdn.net/javaYouCome/article/details/114387178

版权

前端知识专栏收录该内容

14 篇文章 0 订阅

订阅专栏

概述

作为一个Java重度使用患者，后端程序员掌握一些前端知识是必备技能。Html、CSS、JS三大语言后端玩起来也得是溜得很，不过现在前端技术发展的速度简直做上了飞机，后端程序员自己首先要保障后端技术不被拉下，再想回头学学前端技术，没想到那趟飞机已经上天了。

不得不说后端程序员普遍使用的ui界面都是比较丑，再看看现在各种前端页面靓的一匹。现阶段流行的UI框架典型的比如饿了么的Element、阿里的Ant Design等等。

这些框架对于后端程序员使用话说不怎么友好，官方推荐安装Node.JS使用npm install安装，之后使用run dev运行。wtf咱们习惯了传统方式html页面直接引入CSS、JS就能看效果了，我就简单的想看个页面还得占用个端口号，有些大动干戈了。并且在企业开发过程中因为想使用一些组件就创建一个前端工程有些不实际，至此今天带大家直接使用传统后端程序搭建使用Element组件的环境，不安装Node.JS也能让一个老后端也尝尝Element的香。

想要使用Element组件Vue是必备，默认你已经掌握Vuel

文章只是使用Html引入使用Element不对Vue使用和Element使用说介绍。

一、创建文件结构

创建文件夹其中添加css和js、再新建一个html文件，结构如下。
在这里插入图片描述

二、引入Vue和Element文件

Element官网没有推荐的下载包，最方便的引入是直接通过官网的CDN下载，如果项目里使用CND的话这样入库就可以了。

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- Vue库 -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

推荐将上面3个文件下载到本地使用本地文件存储，如果下载文件的方式，还需要再单独引入一个Element的图标样式库，下面是图标库地址。

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/fonts/element-icons.woff">

下载到本地方法：

引入后的文件目录如下
在这里插入图片描述

三、修改html文件, 并参考element文档添加一个按钮和一个弹框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div id="app">
        <el-button @click="visible = true">Button</el-button>
        <el-dialog :visible.sync="visible" title="Hello world">
          <p>Try Element</p>
        </el-dialog>
      </div>
</body>
<script src="./js/vue.min.js"></script>
<!-- import JavaScript -->
<script src="./js/index.js"></script>
<script>
    new Vue({
      el: '#app',
      data: function() {
        return { visible: false }
      }
    })
  </script>
</html>

四、运行

在这里插入图片描述

ok至此放入传统页面里开心的运行吧。

（用心写好每一行程序和文字：完~）

小流至江河

关注

6
点赞
踩
8

收藏

觉得还不错? 一键收藏
3
评论
传统后端程序不使用Node.JS依然要搞Element UI

概述作为一个Java重度使用患者，后端程序员掌握一些前端知识是必备技能。Html、CSS、JS三大语言后端玩起来也得是溜得很，不过现在前端技术发展的速度简直做上了飞机，后端程序员自己首先要保障后端技术不被拉下，再想回头学学前端技术，没想到那趟飞机已经上天了。不得不说后端程序员普遍使用的ui界面都是比较丑，再看看现在各种前端页面靓的一匹。现阶段流行的UI框架典型的比如饿了么的Element、阿里的Ant Design等等。这些框架对于后端程序员使用话说不怎么友好，官方推荐安装Node.JS使用
复制链接

扫一扫