html 文件中使用vant以及element的方法

lfl18326162160

已于 2024-02-20 17:05:07 修改

阅读量613

点赞数 9

文章标签： html 前端

于 2024-02-20 16:19:32 首次发布

本文链接：https://blog.csdn.net/lfl18326162160/article/details/136192888

版权

1.使用vant

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>html导入vant</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0" >
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="vant_source/index.css" />
  </head>
  <body>
    <div id="app">
	 <van-button type="danger">成功按钮</van-button>
    </div>
  </body>
<!-- 引入组件库 -->
 <script src="vant_source/vue@3.js"></script>
 <script src="vant_source/vant.min.js"></script>
 <script>
  // 在 #app 标签下渲染一个按钮组件
  const app = Vue.createApp({
    
  });
  app.use(vant);
  app.use(vant.Lazyload);
  vant.showToast('提示');
  app.mount('#app');
</script>
</html>

2.使用element

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>html导入element</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0" >
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <!-- 引入样式 -->
<link rel="stylesheet" href="ele_source/index.css" />
  </head>
  <body>
    <div id="app">
	<el-button type="primary">主要按钮</el-button>
  </div>
  </body>
  <!-- 引入组件库 -->
  <script src="ele_source/vue.js"></script>
  <script src="ele_source/index.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: function() {
        return { visible: false }
      }
    })

   function step1(){
     console.log('点击主计划管理')
     window.location.href = "./CBD.aspx"
   }
   
  </script>

</html>