本文介绍了如何使用CMD和AMD模块规范来组织和加载Vue组件。通过一个具体的组件A.js示例，展示了如何将其转换为CMD或AMD加载器识别的模块。在实际应用中，不依赖Vue的内置路由，而是采用自定义路由系统。开发流程包括使用Vue文件编写组件，然后利用Webpack或其他打包工具（如Rollup）发布为库形式的JS插件。在开发过程中可能会遇到的挑战包括调试和是否使用Babel等技术问题。
你需要了解下这个 cmd amd 这两种 规范 就应该知道怎么组织 vue的组件了
简单说
假设 你有个组件A.js 里面的结构入下
{
name: 'pdHeader',
props: {
title: {
type: String,
default: '加载中...'
},
isPreview: {
type: Number,
default: 0
},
share: {
type: Object,
default: null
}
},
template: '
'
'
'
'
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: '
'
'
'
'
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的问题。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
