哇霎桅，很久沒有寫文章（總結）了。最近稍微有了一點點時間，也想對自己學習的知識進行系統性的總結沽一。那么就開始搞一個有點用的東西吧：一行一行代碼寫一個基于vue的企業(yè)級可用前端框架。
我們從利用vue-cli手腳架工具創(chuàng)建項目開始漓糙，一步一步的建設我們的基礎框架铣缠。首先，我會詳細的講解PCweb端項目的建設過程，并編寫每一行代碼蝗蛙。然后蝇庭，在此基礎上再介紹移動端web項目的建設，當然也會編寫完整的代碼捡硅。完整可運行的項目代碼會同步推送GitHub遗契。
GitHub地址：
大綱
此前端框架基于vue + axios + antd-vue + vue-router現實，用webpack打包病曾‰狗洌框架主要包含：
1.配置模塊，主要是webpack編譯打包的一些配置項泰涂；
2.HTTP請求模塊鲫竞，基于axios和qs的封裝，主要是用于向后端發(fā)起http請求逼蒙；
3.接口層模塊从绘，在這里調用http請求模塊發(fā)起請求，管理每一個接口是牢，同時包含mock數據僵井；
4.一個自動生成接口層文件的插件，嚴格說這個不屬于此框架的代碼驳棱，打包也不會包含此代碼批什，這只是提高開發(fā)的效率；
5.資源模塊社搅，這里主要放置一些靜態(tài)的資源驻债，如CSS、image等形葬；
6.通用組件模塊合呐，這里主要是一些全局或多個頁面都會用到的組件；
7.視圖模塊笙以，此部分是最常用的開發(fā)目錄淌实，項目中的一個個頁面都在這里；
8.路由模塊猖腕，基于vue-router實現路由的跳轉和控制拆祈，這路由的配置會用到一個叫“auto-vue-routes-plugin”的插件，它可以實現自動的配置路由谈息，大大的提供開發(fā)效率缘屹，讓人用的爽；這個插件是我老大編寫的侠仇，已經提交到npm，此項目引用；
9.存儲模塊逻炊，主要是封裝了localStorage和sessionStorage的操作互亮，用于存儲數據。這里暫時不考慮引入vuex余素，需要開發(fā)中大型應用又需要管理更多狀態(tài)時可自行引入豹休；
10.公共方法模塊，這里主要是一些全局公共的方法桨吊，如存儲處理威根、數據校驗、數據加密视乐、對象和數據的處理洛搀、excel處理、正則等佑淀；
11.登錄模塊留美，主要處理登錄部分的一些邏輯；
12.權限模塊伸刃，主要是處理數據權限的一些邏輯谎砾。
框架結構圖
OK，整個業(yè)務框架基本就包含以上模塊捧颅，上一個結構圖景图，更直觀一點：
安裝開發(fā)工具
當然首先就是安裝需要的開發(fā)工具包啦，一步一步碉哑、一個一個來症歇。
在這過程中，我們需要理清需要什么工具谭梗，這些工具都是干什么的忘晤，為什么需要它。搞清楚這些很重要激捏。
1. Visual Studio Code 设塔，簡稱VS Code。
前端開發(fā)非常好用的一個代碼編輯器远舅。直接下載安裝最新版即可闰蛔。官網下載地址：https://code.visualstudio.com。
2. Node.js图柏。
選擇對應版本下載安裝序六。我安裝的版本是v12.13.0。官網下載地址：https://nodejs.org/en/蚤吹。
Node.js 這個項目最初是被稱為web.js例诀，就是一個高性能的随抠、基于事件循環(huán)的、輕量的web服務器繁涂，并提供了一套庫拱她。后來項目的發(fā)展超出了預期，已經不再是一個單純的web服務器了扔罪，到現在已經發(fā)展為一個平臺秉沼，它是一個高性能的web服務器，它能解析JavaScript語言（內封了V8引擎）矿酵，它提供了一套庫讓JS有了I/O能力唬复，它還包含了一個軟件安裝包的管理工具npm，已經變成了一個構件網絡應用的基礎框架全肮。所以敞咧，在node這個平臺上，你可以用JS去開發(fā)一些獨立的程序倔矾，就像python妄均、java那樣，開發(fā)一些有I/O讀寫的可直接運行的程序（我們知道哪自，沒有node之前丰包，JS都只能在瀏覽器中運行，沒法開發(fā)獨立可運行的程序）壤巷，更重要的是可以用JS去開發(fā)后端服務邑彪，這是一個巨大的變化和創(chuàng)新。從此JS不再局限于瀏覽器了胧华。
從上面關于node的介紹來看寄症，這個跟我們開發(fā)web程序好像沒有什么關系，web程序不需要node的啊矩动。的確有巧，我們開發(fā)的在瀏覽器中運行的web程序是不需要node的，但是我們在開發(fā)web程序的過程中悲没，需要用到node篮迎。所以，我們要搞清楚：
生產環(huán)境并不需要node.js示姿，只是開發(fā)的時候用甜橱。
生產環(huán)境不需要安裝node.js，我們只是開發(fā)web項目的時候會用到node.js栈戳∑癜粒基于vue開發(fā)的web項目，部署到生產環(huán)境的時候只需要通過CDN引入vue子檀，或者將vue打包到項目中即可，當然如果用了其他的庫同樣需要引入。vue項目，其實就是個web項目，打包之后最終就是一些js文件磺浙、image文件和html文件舍肠。這些都是靜態(tài)的文件，可用web服務器來運行驶冒，通常是用nginx苟翻。
我們開發(fā)的時候需要調試web程序，那么需要把web程序在一個服務器中跑起來骗污，一般會用到一個叫 webpack-dev-server 的服務器（下面介紹）崇猫。
項目開發(fā)完成后需要編譯打包，我們會用到 webpack（下面介紹）需忿。
而這兩者都是基于node實現和運行的诅炉。管理依賴包需要npm，這也是node提供的屋厘。
所以涕烧，我們開發(fā)需要安裝node。
引申問題補充說明：
（1）webpack-dev-server 是一個采用 Node.js Express 實現的微型服務器, 內部使用 webpack-dev-middleware 來響應發(fā)送到服務器監(jiān)聽端口的HTTP請求汗洒。它由webpack 提供议纯，用于前端項目的本地開發(fā)和調試。詳見官方文檔：https://www.webpackjs.com/guides/development/#%E4%BD%BF%E7%94%A8-webpack-dev-server溢谤。
（2）Express 是一個保持最小規(guī)模的靈活的 Node.js Web 應用程序開發(fā)框架瞻凤，為 Web 和移動應用程序提供一組強大的功能。Express 提供精簡的基本 Web 應用程序功能世杀，而不會隱藏您了解和青睞的 Node.js 功能阀参。
（3）Koa 是一個新的 web 框架，由 Express 幕后的原班人馬打造瞻坝，致力于成為 web 應用和 API 開發(fā)領域中的一個更小蛛壳、更富有表現力、更健壯的基石湿镀。 通過利用 async 函數，Koa 幫你丟棄回調函數赫模，并有力地增強錯誤處理瀑罗。 Koa 并沒有捆綁任何中間件劣像， 而是提供了一套優(yōu)雅的方法耳奕，幫助您快速而愉快地編寫服務端應用程序。
（4）關于package.json里面配置的依賴包芍躏，在打包的時候是否都會被打包到項目代碼中？記住否纬，webpack打包是根據入口文件遞歸的去生成一個依賴圖烦味，這圖中出現的文件才會被打包。簡單來說溃论，就是項目中import的包才會被打包钥勋，而僅僅是在package.json里面配置的依賴包只會在npm install的時候安裝到node_modules目錄下面，那些在代碼中被import的包會從這個目錄下面尋找菲驴。
OK先煎，安裝了 VS Code 和 Node.js 我們可以進行開發(fā)了薯蝎。至于上面提到webpack 占锯、webpack-dev-server 什么的统诺，我們利用npm在項目中再安裝，而不是全局安裝到系統中婿失。這些是項目依賴的東西豪硅。
框架項目結構
1.初始化項目
初始化項目需要用到一個叫做vue手腳架的工具 vue-cli 。
vue-cli 是 vue 的腳手架砚著，用于生成一個基于vue和webpack的項目模板稽穆。說白了舌镶，就是vue-cli是一個軟件工具餐胀，利用它可以初始化生成一個vue項目，這個項目會有一些目錄結構坟冲、一些配置文件琳猫，并且是利用webpack去打包脐嫂。此項目已經可以直接運行，接下來可以在此基礎上進行開發(fā)匀奏。
vue-cli 分為舊版本和新版本：3.x以下的是舊版本，3.x（含）以上的是新版本聚磺。由于我們安裝的node版本是v12.13.0瘫寝，比較高，vue-cli 3.x以下的版本用到的一些node庫已經被廢棄酸纲，所以栽惶，我們需要安裝3.x版本外厂。
全局安裝?vue-cli，我安裝的版本是 3.0.1。?
打開powershell，運行命令： npm install -g @vue/cli@3.0.1 耻讽。
安裝成功之后，輸入 vue -V 查看版本號慰枕。可能會遇到報錯匕坯，大概是：xxxxxx因為在此系統上禁止運行腳本xxx锹雏。解決方法：以管理員身份運行powershell轻绞，輸入?set-ExecutionPolicy RemoteSigned ，接著輸入 Y 奸远。
再來查看版本號，成功輸出：
一些補充說明：
（1）3.x 版本之后，vue-cli 的包名從 vue-cli 改成了 @vue/cli诅迷。3.x 版本新增了圖形化的方式來創(chuàng)建項目罢杉。
（2）vue-cli 的安裝：
3.0以下：npm install -g vue-cli@版本號
3.0及以上：npm install -g @vue/cli@版本號
卸載
3.0以下：npm uninstall vue-cli -g
3.0及以上：npm uninstall -g @vue/cli
查看版本號
vue -V
vue --version
（3）安裝 vue-cli 之后是否自動安裝了 webpack 拱镐？答：不會的。可以驗證一下：
（4）不推薦全局安裝webpack姥份，webpack 作為一個項目打包工具應該跟項目走郭脂，可以用不同的版本去打包項目。而且在項目中也沒有必要再去手動的安裝webpack澈歉，因為用vue-cli初始化項目的時候會安裝這些依賴包了展鸡，并且會生成一個?package.json 文件，此文件會記錄了生成環(huán)境和開發(fā)環(huán)境需要用到的一些依賴包埃难，其中就會包含webpack莹弊，說明webpack已經安裝好了，當然也肯定會包含 vue 忍弛。這些依賴包都會下載安裝在項目中一個叫?node_modules 的文件夾里面。當你把node_modules文件刪除了，可以項目中運行 npm install 中狂，便會根據?package.json 文件的記錄重新下載并安裝這些依賴包。
（5）webpack 是什么惯驼？webpack是一個模塊打包工具，可以使用webpack管理項目中的模塊依賴，并編繹輸出靜態(tài)文件谆趾。它能夠很好地管理、打包Web開發(fā)中所用到的HTML、Javascript沸枯、CSS以及各種靜態(tài)文件（圖片姓惑、字體等），讓開發(fā)過程更加高效践险。對于不同類型的資源芬萍，webpack有對應的模塊加載器loader示罗。webpack模塊打包器會分析模塊間的依賴關系奶镶，最后生成優(yōu)化且合并后的靜態(tài)資源。其插件功能提供了處理各種文件過程中的各個生命周期鉤子缨硝，使開發(fā)者能夠利用插件功能開發(fā)很多自定義的功能身弊。詳看官網介紹：https://www.webpackjs.com/concepts/?阱佛。
OK扶踊，接下來我們初始化一個vue項目：
首先檢查一遍安裝的工具铸磅，一切正常：
由于vue-cli3 初始化項目的命令與2版本不一樣衔瓮，但是我還是想用舊版本的vue init 功能初始化項目浊猾。
根據說明，安裝@vue/cli-init即可热鞍，輸入命令： npm install -g @vue/cli-init 葫慎。
OK，一切準備就緒碍现，開始初始化項目幅疼，輸入??vue init webpack admin-web-front 。
其中：vue init 是指令昼接，webpack 是模板類型爽篷，admin-web-front 是項目名稱。指令形式是?vue init <template-name> <project-name>慢睡，兩種常用的模板類型：?webpack-simple 和 webpack逐工。
說明：
Vue build standalone // 獨立構建；
Install vue-router? Yes // 安裝路由漂辐，用于導航到不同的頁面泪喊；
Use ESLintto lint your code? Yes // 安裝 ESLint 代碼檢測工具，格式髓涯、寫法等的檢查袒啼，可以規(guī)范化代碼；
Pick a test runner jest? // 單元測試纬纪；
Setup e2e tests with Nightwatch? Yes? // 端到端測試蚓再；
初始化完成，查看項目目錄：
目錄結構說明：
admin-web-front ：
├── build? ? ? ? ? ? ? ? ? ? # 存放構建腳本包各，例如 webpack 配置文件
├── config? ? ? ? ? ? ? ? ? # 存放配置信息
├── node_modules? ? ? ? ? ? # 一些依賴包
├── src? ? ? ? ? ? ? ? ? ? ? # 除首頁外摘仅，其他源代碼
? ? ├── assets? ? ? ? ? ? ? ? ? # 存放代碼之外的資源，例如圖片问畅、字體
? ? ├── components? ? ? ? ? ? ? # 存放除了App.vue主組件之外的其他組件娃属，vue 組件的后綴都是 .vue
? ? ├── router? ? ? ? ? ? ? ? ? # 路由
? ? ├── App.vue? ? ? ? ? ? ? ? ? # 主組件
? ? └── main.js? ? ? ? ? ? ? ? ? # JS 入口文件
├── static? ? ? ? ? ? ? ? ? # 存放靜態(tài)資源
└── test? ? ? ? ? ? ? ? ? ? # 單元測試代碼
├── .babelrc? ? ? ? ? ? ? ? # babel 配置文件
├── .editorconfig
├── .eslintignore
├── .eslintrc? ? ? ? ? ? ? ? # ESLint 配置文件
├── .gitignore
├── .postcssrc
├── index.html? ? ? ? ? ? ? # 首頁
├── package.json? ? ? ? ?# 需要的依賴包
├── package-lock.json? ?# 項目安裝的依賴包版本
└── README.md
我們打開 package.json 文件看看：
可以看到，我們在初始化項目的時候輸入的一些信息都記錄在這里了护姆，指定了 vue 和 vue-router 版本 （符號 ^ 的作用是更新到主版本的最新版）矾端，一些開發(fā)的時候用到的依賴包。
繼續(xù)往下看：
可以看到卵皂，package.json 文件里面開發(fā)依賴包包含了 webpack 须床，大版本是3。說明已經安裝好 webpack了渐裂，所以這就是為什么前面會提到我們不需要在項目中再去手動的安裝webpack豺旬。即使把依賴包刪除了，我們只要運行 npm install 命令柒凉，package.json 里面記錄的依賴包都會被安裝族阅。
OK，來驗證一下：
首先看看是否安裝了 webpack ：
運行 npm run build膝捞，打包此vue項目：
OK，已經成功利用webpack打包項目了蔬咬。
2.?webpack3 升級到 webpack4
接下來再做一件事情：把webpack升級到版本4鲤遥，因為注意到，官方宣傳webpack4相比webpack3構建速度能夠提升60%-98%林艘，聽起來真是讓人心動盖奈，有什么理由不升級呢。
（1）各依賴包都需要升級狐援，直接修改?package.json 文件 devDependencies 部分钢坦，用以下內容替換原來的：
ps: 也可以直接修改項目中各個依賴包的版本號（就是要升級版本），記得加上?"mini-css-extract-plugin": "^0.4.5" 因為原來的沒有啥酱。
"devDependencies": {
"autoprefixer": "^9.3.1",
"babel-core": "^6.26.3",
"babel-eslint": "^10.0.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-jest": "^23.6.0",
"babel-loader": "^7.1.5",
"babel-plugin-component": "^1.1.1",
"babel-plugin-dynamic-import-node": "^2.2.0",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-plugin-transform-vue-jsx": "^3.7.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-2": "^6.24.1",
"babel-register": "^6.26.0",
"chalk": "^2.4.1",
"chromedriver": "^2.44.0",
"copy-webpack-plugin": "^4.6.0",
"cross-spawn": "^6.0.5",
"css-loader": "^1.0.1",
"eslint": "^4.19.1",
"eslint-config-standard": "^10.2.1",
"eslint-friendly-formatter": "^4.0.0",
"eslint-loader": "^2.1.1",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-node": "^8.0.0",
"eslint-plugin-promise": "^4.0.1",
"eslint-plugin-standard": "^3.1.0",
"eslint-plugin-vue": "^4.7.1",
"file-loader": "^2.0.0",
"filemanager-webpack-plugin": "^2.0.5",
"friendly-errors-webpack-plugin": "^1.7.0",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.4.5",
"jest": "^23.6.0",
"jest-serializer-vue": "^2.0.2",
"nightwatch": "^0.9.12",
"node-notifier": "^5.3.0",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"ora": "^3.0.0",
"portfinder": "^1.0.19",
"postcss-import": "^12.0.1",
"postcss-loader": "^3.0.0",
"postcss-px2rem": "^0.3.0",
"postcss-url": "^8.0.0",
"rimraf": "^2.6.2",
"semver": "^5.6.0",
"shelljs": "^0.8.3",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^1.1.2",
"vue-jest": "^3.0.0",
"vue-loader": "^14.2.2",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.5.17",
"webpack": "^4.26.0",
"webpack-bundle-analyzer": "^3.0.3",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10",
"webpack-merge": "^4.1.4"
},
（2）替換插件?extract-text-webpack-plugin爹凹，使用?webpack4?推薦的插件?mini-css-extract-plugin ，修改文件：build/webpack.prod.conf.js （灰色底色的部分是修改的地方）：
（3）刪除?webpack.optimize.CommonsChunkPlugin 相關配置镶殷，修改文件：build/webpack.prod.conf.js （灰色底色的部分是修改的地方）：
（4）增加 optimization 配置禾酱，修改文件：build/webpack.prod.conf.js （灰色底色的部分是修改的地方）：
??optimization:?{
????runtimeChunk:?{
??????name:?'manifest'
????},
????minimizer:?[
??????new?UglifyJsPlugin({
????????cache:?true,
????????parallel:?true,
????????sourceMap:?config.build.productionSourceMap,
????????uglifyOptions:?{
??????????warnings:?false
????????}
??????}),
??????new?OptimizeCSSPlugin({
????????cssProcessorOptions:?config.build.productionSourceMap
????????????{?safe:?true,?map:?{?inline:?false?}}
??????????:?{?safe:?true?}
??????})
????],
????splitChunks:?{
??????chunks:?'async',
??????minSize:?30000,
??????minChunks:?1,
??????maxAsyncRequests:?5,
??????maxInitialRequests:?3,
??????name:?false,
??????cacheGroups:?{
????????vendors:?{
??????????test:?/[\\/]node_modules[\\/]/,
??????????name:?'vendors',
??????????chunks:?'initial',
??????????priority:?-10
????????}
??????}
????}
??}
（5）修改 utils 配置，修改文件：build/utils?.js （灰色底色的部分是修改的地方）：
（6）增加 mode 配置绘趋，修改文件：build/webpack.base.conf.js（灰色底色的部分是修改的地方）：
（7）在 .babelrc 文件添加?transform-es2015-modules-commonjs颤陶，主要是解決 export 和 import 共用導致不兼容而引起的錯誤：
最后，刪除?package-lock.json 文件和 node_modules目錄埋心，最后運行 npm install 指郁，等待安裝完成即可。
OK拷呆， 一切都改好了闲坎，我們來跑起初始化的vue項目，運行 npm run dev茬斧。
在瀏覽器輸入：http://localhost:8080 腰懂，OK，可以看到項目已經跑起來并且可以訪問了：
3. 按劃分的模塊調整項目結構
娃等我很久了项秉，先跟他玩玩绣溜，今晚繼續(xù)這部分內容。
提取公共代碼：通用組件娄蔼、公共方法怖喻、自動生成接口層文件的插件底哗、http請求、數據存儲锚沸。
做成單獨的項目跋选，打包編譯，然后在具體項目中引入哗蜈。
總結
OK前标，萬事開頭難，這頭我們已經開好了距潘。
本篇文章首先介紹了將要開發(fā)的前端框架主要包含配置模塊炼列、HTTP請求模塊、接口層模塊音比、資源模塊俭尖、通用組件模塊、路由模塊硅确、視圖模塊目溉、存儲模塊、公共方法模塊菱农、登錄模塊缭付、權限模塊和一個自動生成接口層文件的插件。
接著介紹了需要的開發(fā)工具包并講解了每個工具的作用循未。
最后利用vue-cli初始化項目并調整目錄結構陷猫。還介紹了如何把webpack3升級到webpack4。
題外話：其實如果僅僅是為了跑起一個vue項目的妖，可以簡單很多的绣檬，需要的工具都安裝新版本，初始化嫂粟，運行即可娇未。我這里整的這么復雜，一來星虹，我比較喜歡舊的項目結構零抬，二來，換webpack版本宽涌、換node版本等這些在工作中可能都會遇到平夜，在這里可以找到答案，三來卸亮，折騰得越多忽妒，對用到的工具就更加了解。
備注：
1.項目未上傳GitHub （文章開頭的GitHub地址未添加），等調整完結構再上傳段直；
2.項目結構未調整吃溅；
3.項目的配置問題，等到后面處理配置模塊的時候再進行優(yōu)化處理坷牛；軟件工程領域的經驗：不要過早的優(yōu)化罕偎，在項目的初期不要把知道的優(yōu)化點都加入到項目中，這樣會增加項目的復雜度而且也沒有多大的優(yōu)化效果京闰，等項目到了一定的規(guī)模，性能問題會隨之而來甩苛，然后再針對性的優(yōu)化蹂楣，效果自然是最理想的。
