传统web项目不做前后端分离能否使用vue的组件化功能?

Question

如果您知道的话,能否直观的回答我的问题?能的话怎么做,不能的话大概为什么不能?如果您想说一下,非常感谢,不想说,也谢谢 不想在一个html和一个.js文件中写太多代码,所以想把每个组建单独出来,又不知道该怎么做 感觉项目还没有大到需要做前后端分离 但是又想使用组件化功能; 该怎么使用啊, 传统web项目不支持.vue文件吧,也不支持import和export吧, 那该怎么写啊 vue是引入js文件的那种方式

Answer 1

你需要了解下这个 cmd amd 这两种 规范 就应该知道怎么组织 vue的组件了

简单说

假设 你有个组件A.js 里面的结构入下

{
    name: 'pdHeader',
    props: {
      title: {
        type: String,
        default: '加载中...'
      },
      isPreview: {
        type: Number,
        default: 0
      },
      share: {
        type: Object,
        default: null
      }
    },
    template: '  <div class="pd-header">' +
    '    <div class="pd-header-btn back" @click="goBack"></div>' +
    '    <div class="pd-header-title">{{title}}</div>' +
    '    <div class="pd-header-btn" @click="goShare" :class="{share:share}"></div>' +
    '  </div>',
    methods: {
      goBack: function () {

      },
      goShare: function () {
        
      }
    }
  }

你需要用上面提到的 加载规范去加载他 形成一个加载器能识别的模块 就变成了下面这样

 
  define('moduleId', function (require, exports, module) {
  var component;
  component = {
    name: 'pdHeader',
    props: {
      title: {
        type: String,
        default: '加载中...'
      },
      isPreview: {
        type: Number,
        default: 0
      },
      share: {
        type: Object,
        default: null
      }
    },
    template: '  <div class="pd-header">' +
    '    <div class="pd-header-btn back" @click="goBack"></div>' +
    '    <div class="pd-header-title">{{title}}</div>' +
    '    <div class="pd-header-btn" @click="goShare" :class="{share:share}"></div>' +
    '  </div>',
    methods: {
      goBack: function () {
       
      },
      goShare: function () {
       
      }
    }
  };
  module.exports = component;
});

然后你主页面调用 就应该是类似下面的

//一个vue实例
define('moduleId2', function (require, exports, module) {
  var pdHeader = require('moduleId');
  var handle.vm=new Vue({
        el: '#app-rule',
        data: {
        
        },
        mounted: function () {
          this.postManInfo();
          
        },
        destroyed: function () {
        
        },
        components: {
          'pdHeader': pdHeader,//a.js 组件
        },
        methods: {
         
          postManInfo: function () {
          
            
          }
        }
      })
    module.exports = handle
  });

这种就是简单的一个例子 ，前提是你要知道 我说前面说的 加载规范,然后这种做法 目前我遇到的 没有用vue的路由 ，我们有自己的路由体系，这里就不展开说了。
这种做法 前期用 cmd 或者amd 规范去写模块 然后加载,

个人做法

用VUE 文件写 ,然后用webapack 或者其他打包工具（rollup） 发布 library 形式的一个js插件(具体需要你去看对应的打包设置)，剩下的就是引用一下完事,插件完全按照 vue文件的写法去做，麻烦的问题就是开发过程中 调试,还有用不用babel的问题。

Answer 2

你现在的情况和我之前比较类似, 两三个文件承载所有的功能, 我的处理方式是这样的:
1)前期使用requirejs做模块化, 花一些时间, 把原来项目按模块拆开(这一步是最难的, 因为一边做项目, 一边还要做短期看不到成效的事情, 所以需要你主推)

2)上一期搞完之后, 在一些不太重要页面加你需要的框架,比如vue, 然后一部分一部分上, 别一起上, 风险太大.

总体来说是把事情做好, 然后把风险控到最低!

Answer 3

使用vue并不一定非非要使用前后端分离 有时候我我们会将它运作双向绑定。和异步渲染

Answer 4

可以。

不使用模块化和构建工具最简单的方式是每个组件的定义及全局注册写一个 js 文件，然后在需要的页面在引入 vue.js 之后用 script 标签引入这个 js 文件即可。

Answer 5

当然可以，你试试不就知道了！一开始我也没用前后端分离的方式，后来用了一个基于vue的组件库 只能前后端分离了

Answer 6

肯定可以的啊