傳統(tǒng)web項目不做前后端分離能否使用vue的組件化功能?

如果您知道的話,能否直觀的回答我的問題?能的話怎么做,不能的話大概為什么不能?如果您想說一下,非常感謝,不想說,也謝謝

不想在一個html和一個.js文件中寫太多代碼,所以想把每個組建單獨出來,又不知道該怎么做

感覺項目還沒有大到需要做前后端分離

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

該怎么使用啊, 傳統(tǒng)web項目不支持.vue文件吧,也不支持import和export吧,

那該怎么寫啊

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

回答

編輯回答

厭遇

你現(xiàn)在的情況和我之前比較類似, 兩三個文件承載所有的功能, 我的處理方式是這樣的:
1)前期使用requirejs做模塊化, 花一些時間, 把原來項目按模塊拆開(這一步是最難的, 因為一邊做項目, 一邊還要做短期看不到成效的事情, 所以需要你主推)

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

總體來說是把事情做好, 然后把風險控到最低!

2017年12月20日 09:02

編輯回答

咕嚕嚕

你需要了解下這個 cmd amd 這兩種規(guī)范就應該知道怎么組織 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 () {
        
      }
    }
  }

你需要用上面提到的加載規(guī)范去加載他形成一個加載器能識別的模塊就變成了下面這樣

 
  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
  });

這種就是簡單的一個例子，前提是你要知道我說前面說的加載規(guī)范,然后這種做法目前我遇到的沒有用vue的路由，我們有自己的路由體系，這里就不展開說了。
這種做法前期用 cmd 或者amd 規(guī)范去寫模塊然后加載,