当前位置:   article > 正文

本地引入elementUI图标使用_elementui下载到本地引入项目

elementui下载到本地引入项目

1、到Element - The world's most popular Vue UI framework中找到CDN

2、找到CDN里script中的代码,复制路径href双引号的部分

https://unpkg.com/element-ui@2.15.9/lib/theme-chalk/index.css

https://unpkg.com/element-ui@2.15.9/lib/index.js

 3、打开之后,界面如下,按住Ctrl+S下载到自己保存的文件夹中

 4、在项目中引入,注意还得自己引入一个vue.js文件

 需要注意的是:以下两个文件可以不在文件中引入,但是一定需要放在此文件夹下,因为请求路径里有一个fonts文件夹

 

 5、在容器中使用

  1. <div id="app">
  2.         <i class="el-icon-edit"></i>
  3.         <i class="el-icon-share"></i>
  4.         <i class="el-icon-delete"></i>
  5.         <i class="el-icon-arrow-left"></i>
  6.         <i class="el-icon-male" style="font-size: 100px;"></i>
  7.         <el-button type="primary" icon="el-icon-search">搜索</el-button>
  8.         <el-row>
  9.             <el-button icon="el-icon-search" circle></el-button>
  10.             <el-button type="primary" icon="el-icon-edit" circle></el-button>
  11.             <el-button type="success" icon="el-icon-check" circle></el-button>
  12.             <el-button type="info" icon="el-icon-message" circle></el-button>
  13.             <el-button type="warning" icon="el-icon-star-off" circle></el-button>
  14.             <el-button type="danger" icon="el-icon-delete" circle></el-button>
  15.         </el-row>
  16.         <div style="margin-top: 15px;">
  17.             <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
  18.                 <el-button slot="append" icon="el-icon-search" @click="btn_click"></el-button>
  19.             </el-input>
  20.         </div>
  21.     </div>
  22.     <script>
  23.         new Vue({
  24.             el: '#app',
  25.             data() {
  26.                 return {
  27.                     input3: '',
  28.                 }
  29.             },
  30.             methods: {
  31.                 btn_click() {
  32.                     if(this.input3 == "") {
  33.                         alert("请输入内容!")
  34.                     }else {
  35.                         console.log(this.input3);
  36.                     }
  37.                 }
  38.             }
  39.         })
  40.     </script>

6、文件下载

https://unpkg.com/browse/element-ui@2.5.4/lib/theme-chalk/fonts/

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/121073
推荐阅读
相关标签
  

闽ICP备14008679号