vue项目经常使用的是 vue-cli+webpack; 可是有些状况下并不适合; 只能使用采用script标签引入的方式进行代码编写, 可是这样的话组件方面用起来不怎么方便! 如今前端还有什么模块框架,最后我采用了seaJs配合vue.js模仿vue-loader! 咱们使用vue-loader的时候采用的是 单个的 .vue 文件; 采用seaJs的话每个组件就是一个js文件!css
咱们看下项目目录!html
Common 文件夹下用来放置同用的静态资源; 其中template 文件夹我放置的是全局屡次使用的组件封装成的模板! Fuwuqi 文件夹是我本身用node搭建的一个本地服务器 具体参考个人服务器的文章; Page文件夹 就至关于vue-cli中的src文件夹; 里面每个文件夹至关因而一个页面的.vue文件! Index.html文件 是页面的入口文件;前端
实现原理: 采用vue.extend(); 方法实例化一个组件, 采用seaJs 的模块化对外开放组件的接口!具体看代码;vue
代码分析: Index.html 中的代码分析:node
<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代码:jquery
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的文件夹webpack
分为两个文件 一个是html文件. 一个是js文件! Html文件 想当于.vue文件中template中的内容:web
<div> <div class="welcome"> <h1 class="welcome-text">欢迎使用 seaJs+vue</h1> </div> </div>
在看一下index.js 文件:vue-router
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 做为对外的接口; 在路由中就能够接收到了这个组件!vue-cli
而后咱们在本地服务器下运行项目; 就能够看到:
关于css文件, 只能是本身写一个css文件 而后在index.html中link进来了, 暂时尚未好的方法!