VueJS：添加到现有的 HTML 并处理导入答案

【问题标题】：VueJS : Adding to existing HTML and handling importsVueJS：添加到现有的 HTML 并处理导入
【发布时间】：2019-03-19 03:36:48
【问题描述】：

所以我在VueJS 中构建了一个单页应用程序，它运行良好，但 SEO 不如预期，所以我决定创建一个普通的 HTML 网站，其中一些页面具有 VueJS 代码（远程托管所以没有其他节点我会去 SSR）。

我关注了this guide，它工作正常

我有一个search.js，其中包含我的VueJS 实例和方法等

Vue.component('todo-component', {
    template: '#todo-component',
    data: function () {
        return {
            items: [
                {
                    id: 'item-1',
                    title: 'Checkout vue',
                    completed: false
                }, {
                    id: 'item-2',
                    title: 'Use this stuff!!',
                    completed: false
                }
            ],
            newItem: ''

        };
    },
    methods: {
        addItem: function () {
            if (this.newItem) {
                var item = {
                    id: Math.random(0, 10000),
                    title: this.newItem,
                    completed: false
                };

                this.items.push(item);
                this.newItem = '';
            }
        }
    }
});

var app = new Vue({
    el: '#vue-app'
});

但是，我需要导入诸如 axios 和其他组件之类的东西

如果我在上面的脚本中添加一个导入语句，它会出现

import axios from "axios";

Uncaught SyntaxError: Unexpected identifier

我的导入应该去哪里？

【问题讨论】：

您是否为您的 javascript 使用任何转译器？ import 只有 Google Chrome 原生支持
我不确定转译器是什么，我需要它在所有浏览器中工作
import 通常不能用于嵌入式脚本；这是转译器（webpack 或 Vue CLI）通过将导入替换为来自其他模块本身的代码来处理的一项功能，但由于您没有用于直接将 Vue 嵌入页面的转译器，因此您无法使用它。详情在这里：developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

标签： javascript vue.js vuejs2 axios vue-component

【解决方案1】：

由于您是直接编写在浏览器中运行的代码，您只需在加载search.js 之前在您的html 代码中包含axios cdn：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

关于组件导入，您可以阅读更多关于component registration here 的信息。一般来说，如果你的组件是通过Vue.component('my-component', {})语法全局注册的，你应该可以直接在你的代码中使用它。

【讨论】：

优秀的示例伙伴，我不认为你知道如何让 lodash _.debounce 使用它，因为它不知道 _ 是什么（在我的 SPA 中工作）

【解决方案2】：

您缺少 axios 库，因此添加如下：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

我还为您提供了在使用浏览器时如何使用它：

new Vue({
  el: '#app',
  data: {
    dataReceived: '',
  },
  methods: {
    getData() {
      axios.get('https://min-api.cryptocompare.com/data/price?fsym=BTC&tsyms=USD')
        .then((response) => {
          this.dataReceived = response.data;
          console.log(this.dataReceived);
          return this.dataReceived;
        })
    }
  }
})

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>

<body>
  <div id="app">
    <button @click="getData" type="button">getData</button>
    <p>dataReceived: {{ dataReceived }}</p>
  </div>
</body>

【讨论】：