vue+seaJS 模仿vue-loader

vue項目經常使用的是 vue-cli+webpack; 可是有些狀況下並不適合; 只能使用採用script標籤引入的方式進行代碼編寫, 可是這樣的話組件方面用起來不怎麼方便! 如今前端還有什麼模塊框架,最後我採用了seaJs配合vue.js模仿vue-loader! 咱們使用vue-loader的時候採用的是 單個的 .vue 文件; 採用seaJs的話每個組件就是一個js文件!

咱們看下項目目錄!

Common 文件夾下用來放置同用的靜態資源; 其中template 文件夾我放置的是全局屢次使用的組件封裝成的模板! Fuwuqi 文件夾是我本身用node搭建的一個本地服務器 具體參考個人服務器的文章; Page文件夾 就至關於vue-cli中的src文件夾; 裏面每個文件夾至關因而一個頁面的.vue文件! Index.html文件 是頁面的入口文件;

實現原理: 採用vue.extend(); 方法實例化一個組件, 採用seaJs 的模塊化對外開放組件的接口!具體看代碼;

代碼分析: Index.html 中的代碼分析:

<div id="app"> <!-- 肯定vue的做用域 -->
<router-view></router-view> <!-- vue 的路由頁面入口標籤-->
</div>
<script src="common/js/sea.js"></script> <!-- 引入seaJs -->
<script src="common/js/vue.js"></script>
<script src="common/js/vue-router.js"></script>

<script>
 seajs.config({ // seaJs 的配置
   base: " /vscode/vue-seaJs", //頁面默認的根目錄
   charset: 'utf-8', // 編碼方式
   alias: {'jquery': 'common/js/jq.js', // 文件路徑配置
           'checkbox':'common/template/checkbox.js', // 這裏是我使用vue + seaJs 封裝的一個 checkbox 錄入框的組件!
           'select':'common/template/select.js' // 這裏是我使用vue + seaJs 封裝的一個 select 錄入框的組件!
   },
   // preload 這裏能夠配置頁面須要的js文件路徑 seaJs會自動加載 這裏加載seaJs-tex:  用來加載html文件時用到它!
   preload: ["common/js/seajs-text"]
 });
 seajs.use(["common/js/app.js"]); //調用app.js,它是頁面的入口js文件!
</script>

App.js代碼:

define(function (require, exports, module) {
  var
    routes = [ //配置路由路徑!
      {path: '/', component: require(page/index/index')}, // 引入組件做爲路由的資源文件!
      {path: '', component: require(page/test/test')} // 引入組件做爲路由的資源文件!
    ],
    router = new VueRouter({ //實例化vue-router;
      routes: routes
    }),
    select = require('select'), // 引入select 組件 至關於 import select from  'select.vue';
    app = new Vue({ //實例化vue
      name: 'vm',
      router: router, //在實例中注入路由;
      components:{ //註冊組件!
        myselect:select
      }
    }).$mount('#app');
});

下面咱們看一下頁面組件index的文件夾

分爲兩個文件 一個是html文件. 一個是js文件! Html文件 想當於.vue文件中template中的內容:

<div>
    <div class="welcome">
        <h1 class="welcome-text">歡迎使用 seaJs+vue</h1>
    </div>
</div>

在看一下index.js 文件:

define(function(require,exports,module){
  var html = require(page/index/index.html'),
    index = Vue.extend({
      template:html,
	data:function(){
	return{
	}
	},
	methods:{
	}
    });
  module.exports = index;
});

使用Vue.extend;函數實例化一個組件; html 是seaJs-text插件引入的html文本; 其餘的data, methods 之類的就像.vue文件中的寫法同樣 不過最好使用es5的語法! 最後在使用seaJs的模塊將index 做爲對外的接口; 在路由中就能夠接收到了這個組件!

而後咱們在本地服務器下運行項目; 就能夠看到:

關於css文件, 只能是本身寫一個css文件 而後在index.html中link進來了, 暫時尚未好的方法!