单个html文件进行vue+elementui的测试(非vue-cli)

最新推荐文章于 2023-06-19 16:39:23 发布

公孙元二

最新推荐文章于 2023-06-19 16:39:23 发布

阅读量321

点赞数

分类专栏： Css/Canvas/SVG/Elementui 文章标签： vue html

本文链接：https://blog.csdn.net/Amnesiac666/article/details/112956757

版权

Css/Canvas/SVG/Elementui 专栏收录该内容

144 篇文章 3 订阅

订阅专栏

有时候只是想写个demo测试一下vue的部分功能或elementui的某个控件功能，但是又不想创建一个vue-cli，于是可以通过引入外链的方式，让一个html文件也能使用vue和elementui的功能

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <style>
  .el-menu-demo{
	  display: flex;
	  justify-content: flex-end;
	}
  </style>
</head>
<body>
  <div id="app">
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
  <el-menu-item index="1">处理中心</el-menu-item>
  <el-submenu index="2">
    <template slot="title">我的工作台</template>
    <el-menu-item index="2-1">选项1</el-menu-item>
    <el-menu-item index="2-2">选项2</el-menu-item>
    <el-menu-item index="2-3">选项3</el-menu-item>
    <el-submenu index="2-4" :popper-append-to-body="true">
      <template slot="title">选项4</template>
      <el-menu-item index="2-4-1">选项1</el-menu-item>
      <el-menu-item index="2-4-2">选项2</el-menu-item>
      <el-menu-item index="2-4-3">选项3</el-menu-item>
    </el-submenu>
  </el-submenu>
</el-menu>
  </div>
</body>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: function() {
        return {}
      }
    })
  </script>
</html>

公孙元二

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
单个html文件进行vue+elementui的测试(非vue-cli)

有时候只是想写个demo测试一下vue的功能或elementui的功能，但是又不想创建一个vue-cli，于是可以通过引入外链的方式，来使用vue和elementui的功能<!DOCTYPE html><html><head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css.
复制链接

扫一扫