通常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. binlog——逻辑复制的基础

    Ⅰ.binlog定义和作用 1.1 定义 记录每次数据库的逻辑操作(包括表结构变更和表数据修改) 包含:binlog文件和index文件 1.2 作用 复制:从库读取主库binlog,本地回放实现复制 ...

  2. InnoDB基本特性

    Ⅰ.double write 目的:保证数据写入的可靠性 小知识: 什么是partial write? 16k的page只写入了4k,6k,8k,12k就断掉了的情况 corrupt的page就是pa ...

  3. python函数调用的四种方式 --基础重点

    第一种:参数按顺序从第一个参数往后排#标准调用 # -*- coding: UTF-8 -*- def normal_invoke(x, y): print "--normal_invoke ...

  4. centos网络配置方法(手动设置,自动获取)

    不知道为什么最近一段时间网络特别的慢,还老是断,断的时候,局域网都连不上,当我手动设置一下ip后就可以了,搞得我很无语.下面是2种设置网络连接的方法,在说怎么设置前,一定要做好备份工作,特别是对于新手 ...

  5. 爬取拉勾网招聘信息并使用xlwt存入Excel

    xlwt 1.3.0 xlwt 文档 xlrd 1.1.0 python操作excel之xlrd 1.Python模块介绍 - xlwt ,什么是xlwt? Python语言中,写入Excel文件的扩 ...

  6. FTP用户无法登陆排错详解

    FTP作为一种简单便捷的文件共享技术,在许多企业内部得到使用.若启用FTP的验证控制,管理员更可对不同的用户设置不同的访问权限,控制用户对特定内容的访问.IIS中的FTP站点只有一种验证方式,即基本验 ...

  7. netty源码分析之揭开reactor线程的面纱(一)

    netty最核心的就是reactor线程,对应项目中使用广泛的NioEventLoop,那么NioEventLoop里面到底在干些什么事?netty是如何保证事件循环的高效轮询和任务的及时执行?又是如 ...

  8. 猴子 JDFZ模拟赛

    猴子(弱) Description 话说NP做梦,梦见自己变成了一只猴子,并且有很多香蕉树,这些香蕉树都种在同一直线上,而NP则在这排香蕉树的第一棵树上.NP当然想吃尽量多的香蕉,但它又不想在地上走, ...

  9. java的Integer与int的比较

  10. Django 基础二(View和urls)

    上一篇博文已经成功安装了python环境和Django,并且新建了一个空的项目.接下来就可以正式开始进行Django下 的Web开发了.首先进入项目的主目录: cd ./DjangoLearn/hol ...