前言
?? 這幾天忙著接手公司舊項目好久沒寫內(nèi)容了，就項目代碼冗余凌亂，實在無法升級維護下去了。老板決定讓我重構(gòu)撒。那就開干吧。
選型
?? 在vue論壇逛了一圈最后決定vue-cli 3.x + element ui 方案。成熟方案更適合團隊玩耍。
SPA 與 MPA
?? 這個是一個考慮點，新手可能會蒙圈MPA是啥，Vue不是SPA開發(fā)模式嗎？好像是那么一回事，我們初始化的項目已經(jīng)官網(wǎng)是否都講Vue SPA開發(fā)，但是VUE是漸進式開發(fā)核心是視圖層。我們build出來的是依賴于 webpack ,而webpack是將所有的資源整合出來。所以就要更改webpack配置依賴是可以實現(xiàn)多頁面開發(fā)的。
// vue.config.js
module.exports = {
...
// 構(gòu)建多頁時使用
pages: {
index: {
entry: 'src/main.js', // 入口
template: 'public/index.html', // 模板
filename: 'index.html',
title: 'model-project',
keywords: 'project',
description: 'Jabo'
},
subPage:{ ... } // 類似上面
},
}
?? MPA的好處自己百度撒，上面是核心配置，但是在最后定型時我選擇了SPA【根據(jù)自己的業(yè)務(wù)場景】，
?? 1、我們做的是后臺管理系統(tǒng)，多SEO之類沒要求
?? 2、團隊開發(fā)人員的習慣，MPA與SPA還是有點區(qū)別的
?? 3、業(yè)務(wù)規(guī)模，MPA浪費了
?? but，我的目錄結(jié)構(gòu)還是構(gòu)建趨于MPA模式，這樣做的好處是后期擴展方便多了選擇。
CND加速【重點】
?? 很多小伙伴怕SPA的一個重要，打包后js巨大，首次打開龜速。所以不得不提的CND來了。這里已element ui 為例
// public/index.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
<meta name="keywords" content="<%= htmlWebpackPlugin.options.keywords %>"/>
<meta name="description" content="<%= htmlWebpackPlugin.options.description %>">
<!-- 這里配置element ui style-->
<link rel="stylesheet" >
</head>
<body>
<noscript>
<strong>We're sorry but model-project doesn't work properly without JavaScript enabled. Please enable it to
continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/vuex/3.1.2/vuex.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
<!-- 這里配置element ui js-->
<script type="text/javascript" src="https://cdn.bootcss.com/element-ui/2.13.0/index.js"></script>
</body>
</html>
// vue.config.js 重點
const externals = {
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex': 'Vuex',
'element-ui': 'ELEMENT',
}
module.exports {
...
configureWebpack: config => {
return {
externals: externals, // 重點
....
}
}
...
}
其他優(yōu)化網(wǎng)上一堆就不嗶嗶了，不曉的可以加粉溝通哈。
