Vue CLI 3 中的 Coffee 语言

Question

我使用vue create创建了一个项目，然后像这样编辑了默认的App.vue:

<script lang="coffee">
import HelloWorld from './components/HelloWorld.vue'
export default
  name: 'app'
  components:
    HelloWorld
</script>

然后遇到了一个错误

 ERROR  Failed to compile with 1 errors                                     8:39:21 PM

 error  in ./src/App.vue?vue&type=script&lang=coffee&

Module parse failed: Unexpected token (11:6)
You may need an appropriate loader to handle this file type.
| import HelloWorld from './components/HelloWorld.vue'
| export default
>   name: 'app'
|   components:
|     HelloWorld

 @ ./src/App.vue?vue&type=script&lang=coffee& 1:0-170 1:186-189 1:191-358 1:191-358
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.88.208:8080/sockjs-node (webpack)/
hot/dev-server.js ./src/main.js

我的package.json

{
  "name": "vue-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "vue": "*"
  },
  "devDependencies": {
    "@vue/cli-service": "*",
    "vue-template-compiler": "*",
    "coffee": "*",
    "coffee-loader": "*",
    "pug": "*",
    "pug-loader": "*",
    "pug-plain-loader": "*",
    "stylus": "*",
    "stylus-loader": "*",
    "vue-loader": "*"
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

Pug和Stylus运作良好，但是在使用Coffee时我遇到了一些问题~_~

- Yu Da Chi

---

使用 vue inspect 命令查看，发现 .vue 文件没有提供 coffee loader，因此需要修改 .vue 文件的配置加载器，并添加 coffee-loader。 - Ohgodwhy

Answer 1

使用Vue CLI，您只需运行以下命令（该命令调用Vue CLI CoffeeScript插件）即可为您的项目添加CoffeeScript支持：

vue add coffee

这将安装以下软件包：

+    "coffee-loader": "^0.9.0",
+    "coffeescript": "^2.3.2",
     "eslint": "^5.8.0",
     "eslint-plugin-vue": "^5.0.0",
+    "vue-cli-plugin-coffee": "^0.1.0",

请注意，您的package.json引用了coffee（一个用于Node.js的测试工具），但应该是coffeescript。

另外，请注意您的代码需要进行微调以解决CoffeeScript错误：

export default
  name: 'app'
  components: {  // <-- use brackets for components
    HelloWorld
  }

{{链接1:演示}}

- tony19

---

请注意，默认情况下这不包括 Babel 转译（问题链接），与默认的 JS 加载器不同，没有插件。也许可以改用 https://github.com/thisredone/vue-cli-plugin-coffeescript？ - phil294