在独立项目中使用 Vue.js答案

【问题标题】：Using Vue.js in a standalone project在独立项目中使用 Vue.js
【发布时间】：2019-06-08 21:16:18
【问题描述】：

我正在努力学习 Vue.js 以供工作，但我似乎有语法错误，但我有一个关于创建整体项目的问题。

到目前为止，要创建项目，我必须使用 npm 来创建项目（或启动 ui，然后从那里开始）。

但我想知道如何在不总是通过命令提示符运行服务的情况下包含 Vue 以在我的浏览器中呈现它。例如，如果我正在使用 html、css 和一些 javascript 创建一个网站前端，我可以以某种方式将 Vue 导入并使用它吗？

我假设是这样的：

<script src="https://unpkg.com/vue-multiselect@2.1.0"></script>

【问题讨论】：

我应该补充一点：如果有人可以指出我可以查看将 html、css 和 javascript/vue 合并到一个文件中的模板的方向。那太好了！
您在寻找单文件组件吗？ vuejs.org/v2/guide/single-file-components.html
嗯，它在 .vue 文件中显示了 Vue 示例。我希望只拥有我的 .css 文件、我的 .html 文件和 .js 文件（或将所有三个文件编译到一个文件中）并将 Vue 合并到其中。而不是创建一个 Vue 项目。
哦，我不是这么理解你原来的评论的。然后只需从任何 CDN 加载 VueJS，它应该可以正常工作，例如来自cdnjs.cloudflare.com/ajax/libs/vue/2.5.22/vue.min.js
刚刚删除了我的最后一条评论。谢谢。所以我可以从cdn加载它，并将其放入我的html文件中，然后使用Vue代码？

标签： javascript html css vue.js

【解决方案1】：

我认为这个链接会对你有所帮助。

https://vuejs.org/v2/guide/#Getting-Started

一个小例子。

html 文件。

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <p>{{ message }}</p>
    </div>
    <script src="index.js"></script>
  </body>
</html>

纯js文件。

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

但是如果你有一个像这样的 .vue 文件：

<template>
  <!- ... ->
</template>
<script>
  // ...
</script>

您别无选择，您需要运行脚本npm run serve 或yarn serve 将.vue 文件编译为有效的javascript 文件。

【讨论】：