vue2+iview+require實現AMD模式下的元件化開發、按需載入
阿新 • • 發佈：2019-01-29
1、最近專案遇到的需求：不使用webpack, 採用老設計模式AMD，實現按需載入，元件化開發
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: 紅色框內為封裝的公用元件）
