Element庫的Vue版本ElementUI的本地引入方法


最近剛接觸ElementUI,發現官方介紹的使用方法中只有npm安裝和CDN引入這兩種方式,沒有本地引入的方法。

因為我的學習環境有時候是斷網狀態的,所以自己研究了一下本地引入的方法,記錄在此。

1、ElementUI是基於Vue.js的,所以先下載Vue.js
  學習階段選擇開發版本。
        Vue.js 官方下載
2、下載ElementUI
        ElementUI GitHub
       點擊 Clone or download
       再點擊 Download ZIP,下載完成后解壓,得到lib-master文件夾
3、新建一個html文件,例如index.html,將Vue.js和lib-master文件夾移動到和index.html同一目錄下。
4、index.html代碼如下:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="lib-master/theme-chalk/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="vue.js" type="text/javascript" charset="utf-8"></script>
<script src="lib-master/index.js" type="text/javascript" charset="utf-8"></script>
<script>
    new Vue({
      el: '#app',
      data: function() {
        return { visible: false }
      }
    })
  </script>
</html>

 

 

 

 


————————————————
版權聲明:本文為CSDN博主「wly_」的原創文章,遵循CC 4.0 BY-SA版權協議,轉載請附上原文出處鏈接及本聲明。
原文鏈接:https://blog.csdn.net/qq_36275259/article/details/103400133


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM