用script的方式引入vue的情况，怎么impor其他的.vue文件作为组件使用？

vincentyeah

18631925

发布于
2017-12-21

因为项目需要，构建项目时候使用传统的多页方式，我的vue也是通过script方式来引入的，没有使用构建工具，但我之前写的.vue文件怎么引入到现在的项目中呢？直接import也不行，求解

vue.js

阅读 20.2k

4 个回答

得票最新

imaxing

5783919

发布于
2017-12-22

✓ 已被采纳

目前我司项目有这种情况, 传统多页项目, 有许多公共样式我通过封装组件引用的, 比如:

header.js

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

通过 script标签引入 header.js, 然后在 header.html 内就可以使用了, 比如:

<!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>

希望可以帮助到你