H5W3
当前位置:H5W3 > 其他技术问题 > 正文

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

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

回答:

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

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>

希望可以帮助到你

回答:

不可以的,.vue文件需要被 webpack等js打包器处理过以后,转换为js才能被浏览器正确识别

回答:

谢邀!
不可以的,.vue文件,又叫”单文件组件”,如下图:

clipboard.png

参考:官网单文件组件

是一种可以把样式、逻辑、模板放在一个文件里,独立发布、便于管理的文件,但这种文件是需要transform的,可以通过Webpack或者Browserify进行处理。

回答:

没怎么接触过类似情况,可以试试

Vue.component(tagName, options)

本文地址:H5W3 » 用script的方式引入vue的情况,怎么impor其他的.vue文件作为组件使用?

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址