您的位置：首页 > 产品设计 > UI/UE

vue2+iview+require实现AMD模式下的组件化开发、按需加载

2017-12-21 20:21 295 查看

github地址：https://github.com/chuanzaizai/vue_iview_require

1、最近项目遇到的需求：不使用webpack, 采用老设计模式AMD，实现按需加载，组件化开发

2、主要技术栈： vue （https://cn.vuejs.org/v2/guide/）

iview （http://v1.iviewui.com/）

requirejs （http://requirejs.org/）

css样式采用less模块化，未在webpack中配置less-loader,借助less.js在客户端编译（此方法不可取，需优化）

3、设计思路：

（1）配置require，新建main.js

main.js中主要配置全局js的依赖项，vue的全局监听器，引入公用的header、nav组件

requirejs.config({
// baseUrl:'./',
paths:{
text:'lib/text',
jquery:'lib/jquery.min',
less:'lib/less-1.6.3.min',
vue:'lib/vue',
iview:'lib/iview.min',
vueresource:'lib/vue-resource-1.3.4.min',
httpinterface: 'httpinterface',
loading: 'loading'
},
shim:{
vue: {
exports:'Vue'
},
iview: [
'vue'
],
vueresource: [
'vue'
]
}
})

// 注册事件
require(['vue', 'iview', 'vueresource', 'loading'], function(Vue, iview, vueresource, loading) {
Vue.use(iview);
Vue.use(vueresource);
// 全局监听器
Vue.http.interceptors.push(function (req, next) {
// 设置全局token
// let token = sessionStorage.getItem("token");
// let prefix = 'Bearer_';
// if(token) {
//   req.headers.set('Authorization', prefix + token);
// }
// 请求中，显示loading
window.$loading.showLoading();
next(function (res) {
// console.log(res);
// 请求成功，关闭loading
window.$loading.hideLoading();
// 这里也可处理全局错误方法
let resBody = JSON.parse(res.bodyText);
if(res.status === 200 && resBody.success){
this.$Notice.destroy();
this.$Notice.success({
title: '提示',
desc: '操作成功,么么哒！',
duration: 2
});
}else{
let msg = '';
resBody.messages ? msg = resBody.messages : msg = '服务器罢工了,请稍后重试！';
this.$Notice.destroy();
// 先执行，并且每个接口都会执行一次，然后再取到接口数据
this.$Notice.error({
title: '提示',
desc: msg,
duration: 2
});

}
})
})
});

// 全局header
require(['./../components/header/header']);

// 全局导航
require(['./../components/nav/nav']);

（2）如何定义一个公用的组件，以header为例

第一步：定义组件的dom结构，header.html

<!-- dom -->
<div class="head-wrapper">
<h1>这里是头部</h1>
</div>

第二步：定义组件的js（注册组件，绑定事件等）ps: 这里要借助require的插件text.js，关于text.js更多

/*
* header控制器
*/
define(['vue', 'text!./../../header/header.html'], function(Vue, headerTemplate){
Vue.component("my-header",{
template: headerTemplate,
data() {
return {

}
},
mounted() {

},
methods:{
test() {

}
},
computed:{

}
});
})

（3）开发首页index

第一步：定义html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>中央审批系统</title>
<!-- css -->
<link rel="stylesheet" type="text/css" href="../../assets/assets.css">
<link rel="stylesheet" type="text/css" href="../../assets/iview.css">
<!-- 服务环境下引入 -->
<link rel="stylesheet/less" type="text/css" href="index.less" />
<!-- require -->
<script src="../../js/lib/require.min.js" data-main="../../js/main.js"></script>
</head>
<body>

<!-- index 根节点 -->
<div id="index" v-cloak>
<!-- header组件 -->
<my-header></my-header>
<!-- 导航栏组件 -->
<my-nav></my-nav>
<!-- 面包屑导航 -->
<div class="bread-nav-wrapper">
<Breadcrumb>
<Breadcrumb-item href="/">
<Icon type="ios-home-outline"></Icon> 首页
</Breadcrumb-item>
<Breadcrumb-item href="/components/breadcrumb">
<Icon type="social-buffer-outline"></Icon> 第一个模块
</Breadcrumb-item>
</Breadcrumb>
</div>
<!-- 内容 -->
<div class="index-content content-wrapper">
<h2>姓名：{{name}}</h2>
<i-table :columns="columns1" :data="data1"></i-table>
<Page :total="100" show-total></Page>
<!-- 测试组件 -->
<Tabs value="name1">
<Tab-Pane label="标签一" name="name1">标签一的内容</Tab-Pane>
<Tab-Pane label="标签二" name="name2">标签二的内容</Tab-Pane>
<Tab-Pane label="标签三" name="name3">标签三的内容</Tab-Pane>
</Tabs>
<Slider v-model="value" range></Slider>
<Input-number :max="10" :min="1" :value="1"></Input-number>
<Date-Picker type="date" placeholder="选择日期" style="width: 200px" ></Date-Picker>
</div>
</div>

<script type="text/javascript">
// 模块的js
require(['./../components/index/index']);
</script>
</body>
</html>

第二步：定义js

/*
* index 控制器
*/
require(['vue', 'less', 'iview', 'vueresource', 'httpinterface'], function(Vue, less, iview, vueresource, httpinterface){
// 实例化对象
new Vue({
el:'#index',
data:{
name:'川仔仔',
value: [20, 50],
columns1: [
{
title: '姓名',
key: 'name'
},
{
title: '年龄',
key: 'age'
},
{
title: '地址',
key: 'address'
}
],
data1: [
{
name: '王小明',
age: 18,
address: '北京市朝阳区芍药居'
},
{
name: '张小刚',
age: 25,
address: '北京市海淀区西二旗'
},
{
name: '李小红',
age: 30,
address: '上海市浦东新区世纪大道'
},
{
name: '周小伟',
age: 26,
address: '深圳市南山区深南大道'
}
]
},
mounted() {
this.getIndex();
this.$Message.success('这是一条成功的提示');
console.log(this.$HTTPINTERFACE);
},
methods:{
getIndex() {
// this.$http.post('http://47.95.232.223:8089/auth/login', {}).then((res) => {
//     console.log(res);
// })
}
},
computed:{

},
components: {

}
})
})

（4）还可以使用ES6语法等，封装公用的方法，全局接口文件等

（5）最终效果图（ps: 红色框内为封装的公用组件）

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航