通常vue都是搭配webpack+vue-cli使用的

如果不在nodejs环境下开发web应用呢?

这里提出一个解决方案:

1、加载requirejs,并且指定main函数

<script data-main="js/main" src="https://cdn.bootcss.com/require.js/2.3.5/require.min.js"></script>

2、定义main函数

require.config({
paths: {
"text": 'https://cdn.bootcss.com/require-text/2.0.12/text.min',
'vueLoader': 'componentLoader',
'article': '../components/article',
'color': '../components/dialog/color',
'util': './common/util',
'app': './workspace/vueSet',
},
waitSeconds: 3
}); require(['vueLoader', 'componentConfig', 'app'], (CptLoader, commCpt, app) => {
CptLoader.config(commCpt,()=>{
setTimeout(()=>{
app.$mount(app.$el);
})
})
});

可以注意到,这提供了一个CptLoader

3、组件loader源码如下所示:

/**
* 组件加载器
*/ //缓存Vue对象
var pool = {}; define([], () => {
//根据path获取名称
function cal(path) {
let r = path.split('/');
return r[r.length - 1];
} return {
/**
* 加载全局配置单
* @param configs
*/
config(configs, res){
return new Promise(() => {
configs.forEach((path, index) => {
require(['text!../components/' + path + '.html', '../components/' + path], (html, js) => {
let v = {
template: html,
mixins: [
js
]
};
pool[path] = v;
let name = cal(path);
Vue.component('v-' + name, pool[path]);
if (res && index == configs.length - 1)
res();
});
});
});
},
/**
* 加载指定path的组件,返回Promise
* @param path
* @returns {function(*)}
*/
load(path){
return res => {
let t;
if (t = pool[path])
res(t);
else
require(['text!../components/' + path + '.html', '../components/' + path], (html, js) => {
let v = {
template: html,
mixins: [
js
]
};
pool[path] = v;
res(v);
});
}
}
};
});

它提供了两个函数:

a、config,用于加载一个数组作为配置单,该数组内的字符串都会被当作vue全局组件加载

b、load,加载单个vue组件

需要注意的是,它默认组件会全部存放在./components下

4、编写组件html和js

html即是标准的template写法,不再赘述

js示例如下所示:

define(['app','vueLoader'], (app,loader) => {
return {
props: ['module', 'toggleIcon', 'thisModule', 'moduleList', 'addModuleListIndex', 'moduleCategoryList', 'iconName'],
data(){
return {
showElement: false,
type: 'tplList',
moduleConfig: [
{
name: '文字',
type: 'wordage',
flag: 0,
},
{
name: '图片',
type: 'groupArea',
flag: 0,
},
{
name: '地图',
type: 'map',
flag: 1,
},
{
name: '地图2',
type: 'map',
flag: 1,
}
],
}
},
created(){
console.log('module-list create');
},
mounted(){
console.log('module-list mounted');
},
methods: {
//添加模板切换功能加显示对应的模块列表
showModuleList: function (index, moduleName) {
app.showModuleList(index, moduleName);
},
toggleIcon(){
this.iconName = this.iconName == this.type ? "" : this.type;
//加载内容的代码转移到此处
}
},
components:{
'palette-item':loader.load('palette-item'),
test:{
template:'<div>123</div>'
}
}
}
});

利用requirejs实现vue的模块化开发的更多相关文章

  1. [工具配置]使用requirejs模块化开发多页面一个入口js的使用方式

    描述 知道requirejs的都知道,每一个页面需要进行模块化开发都得有一个入口js文件进行模块配置.但是现在就有一个很尴尬的问题,如果页面很多的话,那么这个data-main对应的入口文件就会很多. ...

  2. 使用requirejs模块化开发多页面一个入口js的使用方式

    描述 知道requirejs的都知道,每一个页面需要进行模块化开发都得有一个入口js文件进行模块配置.但是现在就有一个很尴尬的问题,如果页面很多的话,那么这个data-main对应的入口文件就会很多. ...

  3. 初学seaJs模块化开发,利用grunt打包,减少http请求

    原文地址:初学seaJs模块化开发,利用grunt打包,减少http请求 未压缩合并的演示地址:demo2 学习seaJs的模块化开发,适合对seajs基础有所了解的同学看,目录结构 js — —di ...

  4. Angular 结合RequireJs实现模块化开发

    angular的指令是模块化很好的一个体现,下面我将只使用指令(不用控制器),结合requirejs,实现模块化开发. 模块化关系图:

  5. Javascript模块化开发,使用模块化脚本加载工具RequireJS,提高你代码的速度和质量。

    随着前端JavaScript代码越来越重,如何组织JavaScript代码变得非常重要,好的组织方式,可以让别人和自己很好的理解代码,也便于维护和测试.模块化是一种非常好的代码组织方式,本文试着对Ja ...

  6. 在Html中使用Requirejs进行模块化开发

    在前端模块化的时候,不仅仅是js需要进行模块化管理,html有时候也需要模块化管理.这里就介绍下如何通过requirejs,实现html代码的模块化开发. 如何使用requirejs加载html Re ...

  7. Vue(十七)模块化开发

    模块化开发   使用vue-cli创建项目   1. vue-router模块化   引入vue-router cnpm install vue-router -S 1.1 编辑main.js imp ...

  8. 【模块化开发】------requireJS的基本使用------【巷子】

    前言 为了提高代码的复用度,开发人员会按照功能把大量的js代码分成若干文件,这样在多个页面就可以使用同一个文件了.,下面是某个网站的js引用情况 虽然代码的复用度提升了,但是缺点也体现了出来 缺点: ...

  9. 模块化开发RequireJS之shim配置

    一.shim requirejs使用AMD规范开发,若开发过程中加载非AMD规范js,需要使用requirejs的shim进行配置. shim配置语法为: //配置文件 requirejs.confi ...

随机推荐

  1. 领域驱动设计和Spring

    原文 http://static.olivergierke.de/lectures/ddd-and-spring/ 1.介绍这篇文章是的介绍一下领域驱动设计的基础构件.概念和Java的web应用(主要 ...

  2. Open-Source Service Discovery

    Service discovery is a key component of most distributed systems and service oriented architectures. ...

  3. 在centos,docker中安装HeadlessChrome

    在centos6中安装chrome与chrome-driver,中间走了很多弯路,遇到很多坑,现将详细步骤总结如下.参考博客链接:https://blog.csdn.net/u013849486/ar ...

  4. 跟我学ASP.NET MVC之一:开篇有益

    摘要: ASP.NET MVC是微软的Web开发框架,结合了模型-视图-控制器(MVC)架构的有效性和整洁性,敏捷开发最前沿的思想和技术,以及现存的ASP.NET平台最好的部分.它是传统ASP.NET ...

  5. 区分IE8 、IE9 、IE10的专属css hack

    想让IE8及以下的浏览器实现同样的效果,且不希望使用css3pie或htc或条件注释等方法时,可能就会需要用到IE8和IE9的专属css hack了. .test{ /* 1. */ color:#0 ...

  6. Kafka的CommitFailedException异常

    一.含义 CommitFailedException异常:位移提交失败时候抛出的异常.通常该异常被抛出时还会携带这样的一段话: Commit cannot be completed since the ...

  7. NIO(一)——缓冲区Buffer

                                        NIO(一)--Buffer NIO简介 NIO即New IO,是用来代替标准IO的,提供了与标准IO完全不同传输方式. 核心: ...

  8. POI excel导出

    ******************************* excel表格导出,使用POI实现 ******************************* 实现导出步骤 --配置导出excel ...

  9. 利用异或求(整数数组中,有2K+1个数,其中有2k个相同,找出不相同的那个数)

    转自https://blog.csdn.net/renjie_998003/article/details/50738025 java的位运算符中有一个叫异或的运算符,用符号(^)表示,其运算规则是: ...

  10. Dubbo中订阅和通知解析

    Dubbo中关于服务的订阅和通知主要发生在服务提供方暴露服务的过程和服务消费方初始化时候引用服务的过程中. 2345678910111213141516171819 public <T> ...