在Vue中加入JSX的做法是,首先需要安裝相應的依賴包。例如你需要使用Vue的JSX語法,則需要安裝“babel-plugin-transform-vue-jsx”這個插件。
npm install --save-dev babel-plugin-transform-vue-jsx
另外需要安裝“babel-preset-env”和“vue-template-compiler”這兩個插件:
npm install --save-dev babel-preset-env vue-template-compiler
然后在配置文件.babelrc中添加以下內容:
{ "presets": ["env"], "plugins": ["transform-vue-jsx"] }
這樣,就可以在Vue項目中使用JSX了。例如:
import Vue from 'vue' Vue.component('my-component', { props: ['msg'], render(h) { return{this.msg}} })
如上述代碼所示,在Vue組件中使用了JSX語法,利用render函數返回JSX代碼生成組件DOM結構。
當然,你也可以使用Vue提供的“vue-loader”來使用JSX。首先,需要安裝“vue-loader”和“vue-template-compiler”這兩個插件:
npm install --save-dev vue-loader vue-template-compiler
然后在webpack配置文件中,添加如下的loader:
module: { rules: [ { test: /\.vue$/, loader: 'vue-loader', options: { loaders: { jsx: 'babel-loader?plugins[]=transform-vue-jsx' } } }, { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ } ] }
這樣,就可以在.vue文件中使用JSX了。例如:
{ title }
如上述代碼所示,利用render函數生成組件DOM結構,在模板中通過jsx語法引用組件。
總結,使用Vue進行開發時,如果需要使用JSX,則需要安裝相應的依賴包,并進行配置。可以通過手動添加配置文件的方式,也可以使用“vue-loader”實現。
上一篇python 生成列向量
下一篇js獲取vue實例