Skip to content

react and vue, single page and multi page, in one project

License

Notifications You must be signed in to change notification settings

icai/webpack-bfms

Repository files navigation

webpack-bfms

react and vue multi page in one project

基于 https://github.com/icai/bfms 改进, 支持泛生态技术.

何为泛生态技术?

  • 提问:

为什么一个项目不能同时使用Vue, React, Angular

当然一个项目用一种技术呈现是最好不过的,但是很多时候迫不得已。

多页应用,多页应用更符合主流场景,转换单页应用 (N->1) 零成本


约定

  • vue 不使用 jsx 语法
  • react 使用 jsx语法

.babelrc

{
  "presets": [
    'react',
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-react-jsx", "transform-runtime"],
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": ["transform-react-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"]
    }
  }
}

单页多页双开

同时支持单页多页,双开模式,但是建议只用一种技术框架
双开模式以 Vue 为例,并引入 https://github.com/PanJiaChen/vue-element-admin 部分页面为示例

查看分支 single-multi


参考

https://github.com/PanJiaChen/vue-element-admin
https://github.com/Plortinus/vue-multiple-pages
https://github.com/webpack/webpack-dev-server
https://github.com/nodeca/mincer
https://github.com/vuejs/vue-cli
https://github.com/vue-template/webpack
https://github.com/facebook/create-react-app