鍍金池/ 問答/HTML/ 用script的方式引入vue的情況，怎么impor其他的.vue文件作為組件使

用script的方式引入vue的情況，怎么impor其他的.vue文件作為組件使用？

因?yàn)轫?xiàng)目需要，構(gòu)建項(xiàng)目時候使用傳統(tǒng)的多頁方式，我的vue也是通過script方式來引入的，沒有使用構(gòu)建工具，但我之前寫的.vue文件怎么引入到現(xiàn)在的項(xiàng)目中呢？直接import也不行，求解

回答
編輯回答
初心

不可以的，.vue文件需要被 webpack等js打包器處理過以后，轉(zhuǎn)換為js才能被瀏覽器正確識別

2018年3月22日 13:37
編輯回答
情已空

沒怎么接觸過類似情況，可以試試

Vue.component(tagName, options)
2017年11月17日 11:55
編輯回答
你的瞳

目前我司項(xiàng)目有這種情況, 傳統(tǒng)多頁項(xiàng)目, 有許多公共樣式我通過封裝組件引用的, 比如:

header.js

var headerTemplate = '<div> header HTML 代碼</div>'
Vue.component('my-header', {
    template: headerTemplate,
    data: xxx,
    methods: {}
    // ...
})

通過 script標(biāo)簽引入 header.js, 然后在 header.html 內(nèi)就可以使用了, 比如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="vue.min.js"></script>
    <script src="header.js"></script>
</head>
<body>
    <div id="main">
        <my-header></my-header>
    </div>


    <script>
        new Vue({
            el: '#main'
        })
    </script>
</body>
</html>

希望可以幫助到你

2018年3月4日 08:29
編輯回答
老梗

謝邀！
不可以的，.vue文件，又叫"單文件組件"，如下圖：

clipboard.png

參考：官網(wǎng)單文件組件

是一種可以把樣式、邏輯、模板放在一個文件里，獨(dú)立發(fā)布、便于管理的文件，但這種文件是需要transform的，可以通過Webpack或者Browserify進(jìn)行處理。

2017年8月29日 00:55