Vue.JS 2.5.1：未捕获的语法错误：意外的令牌导出答案

【问题标题】：Vue.JS 2.5.1 : Uncaught SyntaxError: Unexpected token exportVue.JS 2.5.1：未捕获的语法错误：意外的令牌导出
【发布时间】：2018-10-09 07:28:32
【问题描述】：

我试图使用 VueJS 和 Bootstrap Vue 制作一个单选按钮，但是当我制作它时会发生这种情况。我希望这是语法错误，就像它所说的那样，但我似乎找不到任何线索。

所以我尝试复制粘贴的代码，这里是test_radio.php的完整代码

<!DOCTYPE html>
<html>
<head>
    <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
    <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/>
</head>

<body>
<template>
  <div>
    <b-form-group label="Radios using <code>options</code>">
      <b-form-radio-group id="radios1" v-model="selected" :options="options" name="radioOpenions">
      </b-form-radio-group>
    </b-form-group>

    <b-form-group label="Radios using sub-components">
      <b-form-radio-group id="radios2" v-model="selected" name="radioSubComponent">
        <b-form-radio value="first">Toggle this custom radio</b-form-radio>
        <b-form-radio value="second">Or toggle this other custom radio</b-form-radio>
        <b-form-radio value="third" disabled>This one is Disabled</b-form-radio>
        <b-form-radio :value="{fourth: 4}">This is the 4th radio</b-form-radio>
      </b-form-radio-group>
    </b-form-group>

    <div class="mt-3">
      Selected: <strong>{{ selected }}</strong>
    </div>
  </div>
</template>

    <!-- Vue.js @2.5.1 -->
    <script type="text/javascript" src="js/vue.js"></script>

    <!-- Add this after vue.js -->
    <script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
    <script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

<!-- The error is below -->
<script>
export default {
  data () {
    return {
      selected: 'first',
      options: [
        { text: 'Toggle this custom radio', value: 'first' },
        { text: 'Or toggle this other custom radio', value: 'second' },
        { text: 'This one is Disabled', value: 'third', disabled: true },
        { text: 'This is the 4th radio', value: {fourth: 4} }
      ]
    }
  }
}
</script>
</body>
</html>

Uncaught SyntaxError: Unexpected token export

我很确定 Export 上的代码有错误，但我已经检查了很多次，我似乎无法在语法中找到错误。

我还是 Javascript、Vue.JS 和 Bootstrap Vue 的新手，所以任何帮助都会很有用，谢谢！无论如何，这段代码来自 Bootstrap Vue 的documentation。

【问题讨论】：

import 和 export 还没有浏览器支持，您只能将它们与 webpack (see here) 之类的预处理器一起使用。引导文档正在创建一个 Vue 组件，该代码并不打算在 index.html 中使用。
啊..所以我必须使用Webpack..？有没有其他选择？我尝试从他们的文档中弄清楚如何使用 Webpack，但这很令人困惑。如果没有替代品，任何对 Webpack 的新手参考都会很好。
这是一整罐蠕虫。从这里开始：cli.vuejs.org/guide
嗯...谢谢.. 我尝试阅读 Vue CLI，起初我试图避免它，因为使用 CDN 似乎可以避免它，但我想不是。那我会试着去理解它。谢谢。
哦，您可能想让您的评论成为答案，因为如果需要，我将打开另一个新问题。再次感谢！

标签： javascript vuejs2 bootstrap-vue

【解决方案1】：

如果你打算使用 CDN 方法，VueJS 的开头是这样的

<!-- Begin of area that is impacted by VueJS -->
<div id="app">
   <b-form-group label="Radios using <code>options</code>">
     <b-form-radio-group id="radios1" v-model="selected" :options="options" name="radioOpenions">
     </b-form-radio-group>
   </b-form-group>
</div>
<!-- End of area that is impacted by VueJS -->


<script>
 var app = new Vue({
   el: '#app',
   data: {
      ...
      }
   })
<script>

'#app' 将各个部分联系在一起，而不是导入/导出

【讨论】：

那么，还是没有办法同时使用 export 和 script src 方法？
嗨@fathergorry，当时我是前端开发的新手，显然有一种方法可以使用modules。但我不确定项目设置，因为我已经使用了webpack 方法（使用 Vue CLI 3）。