如何在外部 js 文件中使用 Vue.js答案

【问题标题】：How to use Vue.js in an external js file如何在外部 js 文件中使用 Vue.js
【发布时间】：2019-11-07 12:56:57
【问题描述】：

为什么我将它放在外部js文件中时无法使用Vue打印基本的hello world，但是当我将它放在由脚本标签包围的html文件中时，它可以正常工作

当我将该脚本标记的内容复制并粘贴到一个名为 js_vue.js 的文件中时，它根本不起作用

我是学习 Vue 的新手，所以我不知道这里发生了什么。当然有一种方法可以将我所有的 js 代码放在一个单独的文件中，就像我使用原始 html 和 jquery 一样

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="https://unpkg.com/vue"></script>
    <script src="js_vue.js"></script>
</head>
<body>

<div id="app">
    {{ message }}
</div>


</body>
</html>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    })
</script>

作为片段：

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

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

<div id="app">
  {{ message }}
</div>

【问题讨论】：

您的确切文件是什么，确切的文件名是什么，它们的确切内容是什么，您收到什么错误消息？您现在所描述的内容并没有足够的意义来回答。您在问题中的代码应该可以工作（如果您将其设为 sn-p）。
可能是您的外部脚本在 DOM 准备好之前正在执行。尝试在正文标签的末尾添加您的脚本标签
我想我知道这个问题。将<script src="js_vue.js"></script> 移动到<body> 标记的最底部。该脚本必须在 DOM 中的其他元素可用之后运行。否则，将脚本的内容包装在 document.addEventListener("DOMContentLoaded", fuction(){ // All your script contents}); 中，以便在 DOM 加载完成后执行。
见stackoverflow.com/q/11163060/691711
js 文件实际上只是将代码 sn-p 放在顶部，就像您如何将变量放在函数外部以使其成为全局变量一样

标签： vue.js vue-component

【解决方案1】：

Vue 和 Jquery 没有使用相同的方式或想法来创建动态元素。 Jquery 使用选择器来访问元素，Vue 使用模板来制作真正的动态元素。您正在寻找的是一个 vue 模板。当模板保存到文件中时，您必须将其导入到您的组件中，并放入components。检查this vue structure

import Hello form ./folder/another/Hello.vue

...
componets:{
   Hello
}

在script 标签中编写小组件时也可以解决。检查it on this example

示例

<template id="create-template">
  ....
</template>

Vue.component('create-post', {
  template: '#create-template'
})

【讨论】：