VueJS：添加到现有的 HTML 并处理导入
Posted
技术标签:
【中文标题】VueJS：添加到现有的 HTML 并处理导入【英文标题】：VueJS : Adding to existing HTML and handling imports 【发布时间】：2019-03-19 03:36:48 【问题描述】：所以我在VueJS 中构建了一个单页应用程序，它运行良好，但 SEO 不如预期，所以我决定创建一个普通的 html 网站，其中一些页面具有 VueJS 代码（远程托管所以没有其他节点我会去 s-s-r）。
我关注了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/…
【参考方案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>【讨论】：
以上是关于VueJS：添加到现有的 HTML 并处理导入的主要内容，如果未能解决你的问题，请参考以下文章
SwiftyJSON 并添加到现有的 [String: AnyObject] 字典
将 Typescript 添加到 Vue + Rails 应用程序 - 导入不再起作用？