vue CLI 3 中的咖啡语言

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"
  ]
}

哈巴狗和手写笔很有魅力，但喝咖啡我有点问题~_~

Answer 1

使用 Vue CLI，您只需运行以下命令（调用 Vue CLI CoffeeScript plugin）即可使用 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 (a test utility for Node.js), but it should be coffeescript。

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

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

demo

vue CLI 3 中的咖啡语言

Coffee lang in vue CLI 3

vue.js

coffeescript

vue-cli-3