问题:vue CLI 3 中的# 咖啡语言

我已经用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"
  ]
}

哈巴狗和手写笔就像一个魅力,但咖啡我有一些问题~_~

解答

使用 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
  }

演示