iT邦幫忙

1

Vue 與Chrome Vue.toole 問題請教

您好:

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.
請問,這目前是否有解決方法?

https://ithelp.ithome.com.tw/upload/images/20210228/20104095snwlTPNRix.png

https://ithelp.ithome.com.tw/upload/images/20210228/201040957sNttVQgDw.png

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>

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

謝謝

https://ithelp.ithome.com.tw/upload/images/20210228/201040959rCiAhzmSQ.png

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

2 個回答

1
Peter學程式
iT邦新手 1 級 ‧ 2021-02-28 15:22:27

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

ref

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

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

<script src="https://unpkg.com/vue@next"></script>
noway iT邦新手 5 級 ‧ 2021-02-28 15:35:05 檢舉

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

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邦新手 5 級 ‧ 2021-03-14 10:10:46 檢舉

謝謝!

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

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

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

需要手動開啟

    vm.config.devtools = true;
  1. ....但結果卻出現,請問是哪邊 有問題?

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
但我在地端測試可以的

image

我要發表回答

立即登入回答