Vue 與Chrome Vue.toole 問題請教

vue vue tools

noway 2021-02-28 10:41:53 ‧ 3896 瀏覽

分享至

您好：

1.如附圖一，我使安裝vue.tools，但卻在F12下，沒看到該element可以使用
且chrome上的icon是灰色的
參考以下網址
https://www.tpisoftware.com/tpu/articleDetails/1650
https://blog.csdn.net/sunhl951/article/details/80185628
https://www.cnblogs.com/yummylucky/p/10506001.html
也改了manifest.json，但都沒效。Vue.tools都無法用

Vue.js is detected on this page.
Devtools inspection is not available because it's in production mode or explicitly disabled by the author.
請問，這目前是否有解決方法?

2.我參考 ALX的教學

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <div id="app">
        <section>
            <div class="container">
                <div class="title">
                    <img class="logo" src="">

                    <h1>{{ titleX }}</h1>
                </div>
            </div>

        </section>
    </div>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.6/vue.cjs.js' ></script>
    <script>
        let dataX = {
            srcX: './images/vue-iron.png',
            titleX: 'Vue.js手牽手，一起嗑光全家桶'
        }

        let vm = new Vue({
            el: '#app',
            data: dataX
        });
    </script>
</body>

但結果卻出現，請問是哪邊有問題?

謝謝

第二個問題，感覺好像是檔名的問題，我使用
3.0.1/vue.cjs.js 就無法過
但用 /2.6.11/vue.js，卻可以過...
有規定依定要用 vue.js 嗎?

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

iT邦好手 1 級 ‧ 2021-02-28 15:22:27

看了一下官網， cjs 好像適用於 Server-side render (?)

ref

回應 5
分享
檢舉

看更多先前的回應...收起先前的回應...

EN iT邦好手 1 級 ‧ 2021-02-28 15:23:13 檢舉

如果你要用 vue 3 ，看要不要改成該連結:

<script src="https://unpkg.com/vue@next"></script>

noway iT邦研究生 1 級 ‧ 2021-02-28 15:35:05 檢舉

您好：因為我是使用VS code內的cdnjs外掛來引用，但他3.XX版之後，都是用cjs.js。您給的另一段連結不行，沒跑出結果。

EN iT邦好手 1 級 ‧ 2021-02-28 16:08:20 檢舉

noway
我稍加修改了程式碼，請參考 codepen 。
你如果參考 Alex 大的文章，用 Vue 2.6 會比較好。(因為 Alex 的全家桶教學是 For Vue 2.6 的)。
我在上面範例用的 cdn 是:

https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.1/vue.global.js

更多使用教學可以直接參考官網。

noway iT邦研究生 1 級 ‧ 2021-03-14 10:10:46 檢舉

謝謝!

EN iT邦好手 1 級 ‧ 2021-03-14 15:38:57 檢舉

noway 不客氣!如果有幫助到您，再麻煩您選一下最佳解答 >_<

登入發表回應

dragonH

iT邦超人 5 級 ‧ 2021-02-28 16:05:44

1.如附圖一，我使安裝vue.tools，但卻在F12下，沒看到該element可以使用
且chrome上的icon是灰色的

需要手動開啟

    vm.config.devtools = true;

....但結果卻出現，請問是哪邊有問題?

vue 3.0 的寫法不同

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 3.0 Demo</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id = "app">
        <h1>{{ titleX }}</h1>
    </div>
</body>
</html>
<script>
    // Vue.config.devtools = true;
    const dataX = {
    srcX: './images/vue-iron.png',
    titleX: 'Vue.js手牽手，一起嗑光全家桶'
    };
    const vm = Vue.createApp(
        {
            el: '#app',
            data() {
                return {
                    ...dataX
                };
            },
        },
    );
    vm.config.devtools = true;
    vm.mount('#app');
</script>

codepen

要注意的是 codepen 好像不會觸發 dev-tools
但我在地端測試可以的