Vue 2 中的 Hello World(JSX 方式)

JSX 並不打算由瀏覽器解釋。它必須首先轉換為標準的 Javascript。要使用 JSX,你需要安裝 babel babel-plugin-transform-vue-JSX 的外掛

執行以下命令:

npm install babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx babel-helper-vue-jsx-merge-props --save-dev

並將其新增到你的 .babelrc,如下所示:

{
  "presets": ["es2015"],
  "plugins": ["transform-vue-jsx"]
}

使用 VUE JSX 的示例程式碼:

import Vue from 'vue'  
import App from './App.vue'

new Vue({  
  el: '#app',
  methods: {
    handleClick () {
      alert('Hello!')
    }
  },
  render (h) {
    return (
      <div>
        <h1 on-click={this.handleClick}>Hello from JSX</h1>
        <p> Hello World </p>
      </div>
    )
  }
})

通過使用 JSX,你可以在編寫 JavaScript 程式碼的同一檔案中編寫簡潔的 HTML / XML 結構。

恭喜你,你做完了:)