问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

react vue angular这些前端库我能不做单页APP吗？

头像
追风
    6711299129

    比如我要在现成的服务器页面中使用一些流行的前端库，比如就像jquery一样，我也不想什么搞一套前端构建环境什么的，直接在页面或js中修改就OK了。

    哪个可以呢？我看到react要翻译jsx，唉。

    我就想页面中部分模块需要JS渲染的直接改下，不做spa，不搞什么各种前端构建，直接JQ一样玩

    vue.jsreactjavascript前端
    阅读 2.6k
    1 个回答
    得票最新
    头像
    TTFB
      8.4k31326
      ✓ 已被采纳

      这些框架或库本身就不是为SPA设计的，路由只是它们的一部分功能而已。

      Vue最简单，在每个页面引入Vue的源文件，然后就可以直接使用了

      <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue</title>
</head>
<body>

<div id="app">{{val}}</div>

<script src="./node_modules/vue/dist/vue.min.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      val: 0
    }
  });
</script>
</body>
</html>

      然后看angular，同样引入源代码，可以直接使用

      <!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
  <meta charset="UTF-8">
  <title>Angular</title>
</head>
<body>
<div ng-controller="MainCtrl">
  {{a}}
</div>

<script src="./node_modules/angular/angular.min.js"></script>
<script>
  angular.module('app', [])
    .controller('MainCtrl', function($scope) {
      $scope.a = 'aaa';
    });
</script>
</body>
</html>

      Angular2就别想了，太重，估计你也不愿意折腾，而且不使用构建工具你是无法享受编写TS乐趣的。

      至于React，也是可以直接使用的

      <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>React</title>
</head>
<body>
<div id="app"></div>

<script src="./node_modules/react/dist/react.min.js"></script>
<script src="./node_modules/react-dom/dist/react-dom.min.js"></script>
<script>
  var App = React.createClass({
    render: function() {
      return React.createElement('h1', null, 'App');
    }
  });

  ReactDOM.render(
    React.createElement(App, null, null),
    document.getElementById('app')
  )
</script>
</body>
</html>

      不过不用JSX语法，你会发现代码太难维护了，如果你又不想构建工具的话，那只能做实时编译了，不过不建议用在生产环境，太耗性能

      <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>React</title>
</head>
<body>
<div id="app"></div>

<script src="./node_modules/react/dist/react.min.js"></script>
<script src="./node_modules/react-dom/dist/react-dom.min.js"></script>
<script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
<script type="text/babel">
  var App = React.createClass({
    render: function() {
      return <h1>App</h1>;
    }
  });

  ReactDOM.render(
    <App/>,
    document.getElementById('app')
  )
</script>
</body>
</html>
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题