vue的ui库使用Element UI，纯html页面，不使用webpack那玩意

时间：2021-10-25 21:44:29

使用手册访问：https://cloud.tencent.com/developer/doc/1270

第一步：在head添加样式

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

第二步：在html代码之后加
  <!-- import Vue before Element -->

  <script src="https://unpkg.com/vue/dist/vue.js"></script>

  <!-- import JavaScript -->

  <script src="https://unpkg.com/element-ui/lib/index.js"></script>

注意：使用element标签的div的id必须在new vue{}对象里：

例如：
<body>

  <div id="app">　　--element标签的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>

    new Vue({

      el: '#app',　　---那么#app就必须在new Vue的el里

      data: function() {

        return { visible: false }

      }

    })

  </script>

注：不用安装什么npm i element-ui -S 之类的
 

相关文章