尝试写个 Chrome 插件,发现html 的 app节点没出来?

尝试写个 Chrome 插件,发现 html 无法正常展示,控制台没有异常输出。
vue 下载的
https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.min.js

popup.html

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>导出商品信息</title>
    <link rel="stylesheet" href="static/css/bootstrap.min.css">
    <script src="static/js/vue.min.js"></script>
    <script src="static/js/xlsx.full.min.js"></script>
    <script src="static/js/axios.min.js"></script>

    <style>
        body {
            width: 300px;
            padding: 10px;
        }
    </style>
</head>

<body>
    <div id="app" class="container">
        <h1 class="my-4">商品信息导出</h1>
        <button @click="exportItemInfo" class="btn btn-primary">导出为Excel</button>
    </div>
    <script src="popup.js"></script>
</body>

</html>

popup.js

new Vue({
    el: '#app',
    data:{
        result: ''
    },
    methods: {
        exportItemInfo() {
           
        },
        exportToExcel(products) {
        
        }
    }
});

  1. 第三方依赖用 cdn 引入则可以显示界面按钮,但是有个 安全域的问题。
  2. 改下载到本地来引入,发现插件界面空白,html 没有 app节点信息,这是为啥?
  3. Vue感觉没有下载对包,问一下这种引入要用vue的哪个包呢?。

把 popup.js 引入注释掉就正常显示
image.png

阅读 2.4k
1 个回答

因为你没有导入vue

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>导出商品信息</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.min.js"></script>

    <style>
      body {
        width: 300px;
        padding: 10px;
      }
    </style>
  </head>

  <body>
    <div id="app" class="container">
      <h1 class="my-4">商品信息导出</h1>
      <button @click="exportItemInfo" class="btn btn-primary">
        导出为Excel
      </button>
    </div>
  </body>
</html>

<script>
  new Vue({
    el: "#app",
    data: {
      result: "",
    },
    methods: {
      exportItemInfo() {},
      exportToExcel(products) {},
    },
  });
</script>

image.png

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏