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

如果您知道的话,能否直观的回答我的问题?能的话怎么做,不能的话大概为什么不能?如果您想说一下,非常感谢,不想说,也谢谢

不想在一个html和一个.js文件中写太多代码,所以想把每个组建单独出来,又不知道该怎么做

感觉项目还没有大到需要做前后端分离

但是又想使用组件化功能;

该怎么使用啊, 传统web项目不支持.vue文件吧,也不支持import和export吧,

那该怎么写啊

vue是引入js文件的那种方式

javascript

java 前端 vue.js 后端

阅读 14.3k

9 个回答

YPanda

你需要了解下这个 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 规范去写模块然后加载,