关于把element-UI 本地引入的JS和CSS文件 问题

最新推荐文章于 2023-11-24 11:38:59 发布
最新推荐文章于 2023-11-24 11:38:59 发布
阅读量3.9k 收藏 5
点赞数 1
文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37505126/article/details/108267106
版权

关于把element-UI js和CSS本地化的 问题，如果你是 直接粘贴和复制了index.js 和CSS 文件的你 会发现 ，在html加载的时候 会出现 找不到 对应路径的问题，很简单 这里有 ttf,woff两个文件你没有 在你的HTML根目录下去 创建一个fonts的文件夹，其实只要把这两个搞好就可以了
在这里插入图片描述
在这里插入图片描述
然后按下图的示例代码来引入就可以了# 注意这里你 CSS的 字体引入会在fonts名称文件

<!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="./index.css">
 

    <style type="text/css">
    html, body, div, ul, li, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, form, input, textarea, th, td, select {
    margin: 0;
    padding: 0;
    }
    *{box-sizing: border-box;}
    html, body {
    min-height: 100%;
    }


        .left {
            float: left;
            z-index: 2001;
            display: flex!important;
            /* display: flex;
            flex-direction: column!important; */
            
        }
        .left img {
            /* flex: 1; */
            height: 60px;
            width: 250px;
        }
        .left ul {
            /* flex: 1; */
            top:155px;
            position: fixed;
            width: 192px;
            background-color: #32478A;
            list-style-type:none；
        }

        .memu-ul {

            
            margin-left: 58px;
        }
        .memu-ul li {
            display: flex;
            flex-direction: row !important;
            height: 25px;
            width: 192px;
            margin-bottom: 53px;
           
        }
        .memu-ul li img {
            
            width: 20px;
            height: 25px;
            margin-right: 16px;
        }
        .memu-ul li a {
            line-height: 30px;
            text-decoration: none;
            color:#D6DAE7;
        }
        .right {
            float: right;
        }

        .header {
            position: fixed;
            width: 100%;
            height: 69px;
            
            /* background-color: blue; */
            /* color: white; */
        }
        .header img {
            width: 100%;
           
            height: 69px;
        }

        .content .menu {
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            width: 250px;
            background-color:#32478A;
        }

        .content .content {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 250px;
            background-color: #F7F8FD;
            overflow: auto;
        }
        #app{
            position: fixed;
            
            top: 69px;
            left: 250px;
            right: 0;
            bottom: 0;


        }
        #app .list-1 {
            position: relative;
            margin-top: 41px;
            /* background-color: aqua; */
        }
        #app .contorl-p1.u1 {
            position: fixed;
            top:101px;
            right: 30px;
            width: 100px;
            height: 35px;
            display: flex;
            flex-direction: row!important;
            justify-content: center!important;
            align-items:center !important;
           
            border-radius: 13%;
            border-width: 1px; 
            border-style: solid;
            border-color: #5B87E7;
            color:#fff;
            line-height: 12px;
            margin-bottom: 14px;
            
            background: url("./icon/t-18.png") no-repeat 0 0;
            background-color: #5B87E7;
            

        }
        #app .contorl-p1 i {
            text-align: center;
            padding-left: 16px;
            font-style:normal;

        }
       
        #app .list-1p {
            margin-left: 30px;
        }
        #app .list-item {
            margin-left: 30px;
            margin-right: 30px;
            border-radius:5px ;
            border-width: 2px; 
            border-style: solid;
            border-color: #EEEFF1;
            margin-bottom: 8px;
        }
        #app .item-1 {
            margin-top: 20px;
            margin-left: 30px;
            margin-right: 30px;
            border-radius:5px ;
            border-width: 2px; 
            border-style: solid;
            border-color: #EEEFF1;
            margin-bottom: 8px;
        }
        #app .el-dialog {
            height: 320px;
            /* width: 920px ; */
            position: relative;
            border-radius: 26px;
            
            z-index: 201;
            
        }
       
        #app .el-dialog .cover-1 {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 44px;
        /* width: 460px; */
        border-top-left-radius: 26px;
        border-top-right-radius: 26px;
        z-index: 201;
        background-color: #32478A;
        }
        #app .el-dialog .cover-1 i {
            margin-top: 13px;
            margin-left: 20px;
            line-height: 20px;
            font-style:normal;
            color:#fff;

        }
        #app .el-dialog__close.el-icon-close {
            position: absolute;
            top: -10px;
            right: 0;
            z-index: 300;
            font-size: 20px;
            color:#fff;
        }
        #app .flex-1 {
            display: flex;
            margin-top: 50px;
            flex-direction: row;

        }
        #app .flex-2 {
            display: flex;
           
            flex-direction: row;

        }
        #app .el-dialog .input-1 {
            width: 150px;
            margin-right: 60px;
            margin-bottom: 30px;
        }
        #app .el-dialog .input-2 {
            width: 150px;
            margin-bottom: 15px;
        }
        #app .el-dialog .i-span {
            margin-right: 4px;
        }
        #app .el-dialog .i-span-x {
            margin-right: 12px;
        }
        #app .el-dialog .dialog-footer {
            position: relative;
            right:60px;
            bottom: -80px;

            display: flex;
            /* margin-top: 49x;
            margin-right: 20px; */
            flex-direction: row;
        }
        #app .el-dialog .i-1 {
            color:#C93C3C;
        }
        /* #app .el-dialog .fbt-1 {
            
        } */
    </style>

</head>
<body>
   <div>
   
        <div class="content">
            <div class="menu left">
               <img src="./icon/t-1.png" alt="#">
               <ul class="memu-ul" >
                <li>
                    <img src="./icon/t-3.png" alt="#"><a href="#">我的任务</a>
                </li> 
                <li>
                    <img src="./icon/t-4.png" alt="#"><a href="#">项目管理</a>
                </li>
                <li>
                    <img src="./icon/t-5.png" alt="#"><a href="#">问题管理</a>
                </li>
                <li>
                    <img src="./icon/t-6.png" alt="#"><a href="#">任务评价</a>
                </li>
                <li>
                    <img src="./icon/t-7.png" alt="#"><a href="#">档案库</a>
                </li>
                <li>
                    <img src="./icon/t-8.png" alt="#"><a href="#">组织管理</a>
                </li>
               </ul>
            </div>
            
            <div class="content right">
                <div class="header">
                    <img src="./icon/t-16.png" alt="#">
                </div>
                <div id="app">
                    
                    <div class="list-1" v-for="item in list" :key="item.id">
                        <div class="list-1p"> 个人信息 <el-button class="u1 contorl-p1" type="button" @click="dialogFormVisible = true"><i>修改</i></el-button></div>
                        <div class="list-item item-1">&nbsp账号名: &nbsp {{item.username}}</div>
                        <div class="list-item">&nbsp姓名:&nbsp {{item.name}}</div>
                        <div class="list-item">&nbsp性别:&nbsp {{item.gender}} </div>
                        <div class="list-item">&nbsp密码:&nbsp {{item.password}} </div>

                       
                        
                    </div>
                    

                <el-dialog title="" calass="cover" :visible.sync="dialogFormVisible">
                    
                    <el-form :model="form">
                        <el-form-item class="cover-1"><i>个人信息</i></el-form-item>
                        <div class="flex-1">
                            <span><i class="i-1">*&nbsp</i><span>账号名</span><el-input v-model="form.username" class="input-1" autocomplete="off"></el-input></span>
                            <span><i class="i-1">*&nbsp</i><span class="i-span">姓名</span><el-input v-model="form.name" class="input-2"  autocomplete="off"></el-input></span>
                        </div>
                       
                        <div class="flex-2">
                            <span><i class="i-1">*&nbsp</i><span class="i-span i-span-x">性别</span><el-select v-model="form.gender" placeholder="请选择性别">
                                <el-option label="男" value="男"></el-option>
                                <el-option label="女" value="女"></el-option>
                              </el-select></span>
                            <span><i class="i-1">*&nbsp</i><span class="i-span">密码</span><el-input v-model="form.password" class="input-2" autocomplete="off"></el-input></span>
                        <div>
                       
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button class ="ftb-1" @click="dialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click=" change">保存</el-button>
                    </div>
                </el-dialog>
                </div>
               
            </div>
            
        </div>

   
    
   </div> 
  
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- <script type="text/javascript" src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js" ></script> -->
 
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
   <script>
    //    var pinfo = {
    //        template: "#pinfo",
    //        data: function(){

    //        }
    //    }
   </script>
   <script>
   
   var app = new Vue({
       
        el:"#app",
        
       
        data (){
           return {
            edit:"false",
            list:[
                {
                    username:"zhang001",
                    name:"张三",
                    gender:"男",
                    password:"123456"
                }
                
            ],
            dialogFormVisible: false,
            form: {
                username:'',
                name: '',
                gender:"",
                password:""
           
            },
            formLabelWidth: '120px'

            }
         },
        methods:{
            change() {
                this.dialogFormVisible = false
                this.list [0]= this.form

            }
        }
                    
       
    })
</script>
</body>



</html>

w

黑夜前行 头顶光火
关注
element-ui本地引用方法
ttphoon的博客
03-05 1万+
之前写了讲element-ui下载到本地的方法： https://blog.csdn.net/ttphoon/article/details/104653785 但是，下载下来后要去使用发现只有官方文档里的首个例子可以正常运行，之后的各个脚本执行都是样式无效的，需要去修改一些内容。 首先，引用本地element-ui <script src="/static/html/common/vu...
element-ui 本地化使用教程
热门推荐
FFXY
10-26 8万+
element-ui 本地化使用 element-ui 下载脚本
Jsp结合ElementUI要用的js和css
01-10
ElementUI版本 2.13.0； Vue版本 v2.6.11； Jsp结合ElementUI要用的js和css； Jsp结合ElementUI要用的js和css；
Element-UI本地引入
09-17
Element-UI本地引入，在jsp里不能通过url引入就只能用本地引入了（注意修改css中关于字体和图标的位置链接）
elementUI本地引入
bingot的博客
12-18 3万+
elementUI本地引入 背景是公司需要做一个后台管理系统，但是要求不要vue的cli，我看了一下elementui挺适合的，但是官网上的教程只是说了用vue的cli引入和cnd引入，没有说如何本地引入，百度看了一下，关于这方面的文章也比较少，所以就自己整了一下，下面是代码。 首先 把主要文件下载下来vue.js，element.js，element.css下载下来(点击vue.js，粘贴复制即...
在web项目中通过引入element的js和css进行使用
qq_41184981的博客
08-02 6902
1.下载element.js和element.css js和css在官网上没有直接下载地址，下面是我的一些经验。 2. 下载下来后，element的图标库还没有，图标标签还不能使用，但是其他标签可以使用。 下载图标库文件 地址：https://unpkg.com/browse/element-ui@2.13.2/lib/theme-chalk/fonts/ 该地址还是上面的提供的查看版本的地址。 3.在项目的根目录创建 fonts 文件夹，放入 ttf 和 woff 文件 否则需要根据自己存放的位置修
element ui 离线压缩版 js css 含图标
03-15
页面内引用element ui的js 及css离线版 便于不想通过webpack 打包和前后端分离使用
element-ui 2.15.9下载到本地资源最新版本压缩包（附element-ui本地引用方法）
06-04
本地引用示例： <!... <title>my ... <link rel="stylesheet" href="/my/html/element-ui/lib/theme-chalk/index.css"> <el-row> <el-col :span="24"><div class="myclass"></div></el-col> </el-row>
Vue与Element-ui离线文件，，无需npm安装，本地html文件可直接正常运行打开。
03-16
搞这么一个文件主要是我不想安装npm安装，或者说网址引用Vue.js和Element-ui的网址引用。所以就从他们的官网文件夹里直接把js，css，和图标文件复制下来整理了一下，Elementui的模组都可以正常使用和呈现出来。我...
vue-element-admin-tinymce本地化文件
06-04
"vue-element-admin-tinymce本地化文件"是一个集成了Vue.js、Element UI和TinyMCE的前端项目，特别强调了本地化配置和不依赖CDN的特性。通过深入理解Vue.js的组件化开发、Element UI的UI设计、TinyMCE的富文本编辑...
全国省市区街道ELementui专用.js
04-08
代码内格式[value:'',label:'',children[]]，全国省市区街道数据，elementUI级联选择器数据格式，四级联动，拿来即用
vue中babel-plugin-component按需引入和element-ui 的主题定制，支持发布，上线
发果叁
08-23 1630
目前项目用的vue +element-ui，之前有了解过element-ui真正的按需引入，也有了解到主题定制，之前的项目都是根据element-ui的类及标签，在全局或者局部进行一大堆样式覆盖，达到自己项目ui的样式，项目中按需引入实际也并没有真正实现按需引入。趁此新起的项目。实践一下对element-ui主题和组件方面来优化。通过以上实验分析我们可以得知，element-ui首先通过插件进行按需引入。再用工具生成样变量文件。然后根据项目需求修改自定义样式，依据该文件构建生成所有样式。
element-ui引入css存在的问题
Lschange的博客
05-24 1万+
正常我们用vue-cli开发项目，可选择的插件很多，例如vux、iview、element-ui等等今天说下element-ui的安装以及使用命令行安装：npm i element-ui -S然后在main的js中引入以及注册就可以使用了（全局注册）import ElementUI from 'element-ui' import 'element-ui/lib/theme-default/ind...
Django本地引入的element ui的css文件网页不会显示图标
weixin_44284498的博客
03-02 1068
Django本地引入的element ui的css文件网页不会显示图标
ElementUi离线引用JS，css 后图标不显示
TortyE的博客
11-24 465
Elementui的JS网址：https://unpkg.com/element-ui/lib/index.jsElementui的CSS网址：https://unpkg.com/element-ui/lib/theme-chalk/index.csselement字体。
chrome插件开发（二） 入门篇（content script )
天下无双
02-24 3万+
1: content scripts是page action将注入到特定页面中的脚本 chrome插件中的 content script 是运行在一个被称为isolated world 的运行环境里，和页面上的脚本互不干扰，因为不在一个运行环境里，所以也无法调用页面上脚本定义的方法了，当然google也给出了解决方法：http://code.google.com/chrome/extensi
CSS、JavaScript、Bootstrap、ElementUI和Vue的区别
weixin_54104864的博客
07-24 1268
CSS/JS提供基础能力,Bootstrap/ElementUI提供组件,Vue用来组装应用。它们各自有不同的侧重点,但通常都是前端开发的重要工具。
使用vue+element开发一个谷歌插件
hello，是翠花呀
05-10 3811
简单功能：点击浏览器右上角插件icon弹出小弹窗，点击设置弹出设置页，并替换背景颜色。 这里使用vue+element并不是说写插件引用各种库才好，而是为了演示而使用。 开始 1.本地创建文件夹testPlugin并新建manifest.json文件 2.添加插件的小icon testPlugin下创建icons文件夹，可以放入一些不同尺寸的icon，测试
element-ui@2.15.14css文件下载
最新发布
06-27
Element-UI是一个流行的开源前端组件库，用于快速构建用户界面。如果你需要下载Element UI 2.15.14版本的CSS文件，首先你需要访问Element UI的GitHub仓库（https://github.com/ElemeFE/element），然后找到对应版本的`dist`文件夹。 在2.15.14版本中，CSS文件通常位于`dist/css`目录下，主要的CSS文件有`element-ui.css`和`element-ui.ie.css`（针对IE浏览器的兼容样式）。你可以直接下载`element-ui.css`，它包含了所有核心样式。 如果你想要获取最新的稳定版本，可以从Element UI的官方网站（https://element.eleme.cn/#/zh-CN/component/download）下载预打包的文件，那里会提供不同环境和版本的下载链接。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值