哇，很久沒有寫文章（總結）了。最近稍微有了一點點時間，也想對自己學習的知識進行系統性的總結。那么就開始搞一個有點用的東西吧：一行一行代碼寫一個基于vue的企業級可用前端框架。
我們從利用vue-cli手腳架工具創建項目開始，一步一步的建設我們的基礎框架。首先，我會詳細的講解PCweb端項目的建設過程，并編寫每一行代碼。然后，在此基礎上再介紹移動端web項目的建設，當然也會編寫完整的代碼。完整可運行的項目代碼會同步推送GitHub。
GitHub地址：
大綱
此前端框架基于vue + axios + antd-vue + vue-router現實，用webpack打包。框架主要包含：
1.配置模塊，主要是webpack編譯打包的一些配置項；
2.HTTP請求模塊，基于axios和qs的封裝，主要是用于向后端發起http請求；
3.接口層模塊，在這里調用http請求模塊發起請求，管理每一個接口，同時包含mock數據；
4.一個自動生成接口層文件的插件，嚴格說這個不屬于此框架的代碼，打包也不會包含此代碼，這只是提高開發的效率；
5.資源模塊，這里主要放置一些靜態的資源，如CSS、image等；
6.通用組件模塊，這里主要是一些全局或多個頁面都會用到的組件；
7.視圖模塊，此部分是最常用的開發目錄，項目中的一個個頁面都在這里；
8.路由模塊，基于vue-router實現路由的跳轉和控制，這路由的配置會用到一個叫“auto-vue-routes-plugin”的插件，它可以實現自動的配置路由，大大的提供開發效率，讓人用的爽；這個插件是我老大編寫的，已經提交到npm，此項目引用；
9.存儲模塊，主要是封裝了localStorage和sessionStorage的操作，用于存儲數據。這里暫時不考慮引入vuex，需要開發中大型應用又需要管理更多狀態時可自行引入；
10.公共方法模塊，這里主要是一些全局公共的方法，如存儲處理、數據校驗、數據加密、對象和數據的處理、excel處理、正則等；
11.登錄模塊，主要處理登錄部分的一些邏輯；
12.權限模塊，主要是處理數據權限的一些邏輯。
框架結構圖
OK，整個業務框架基本就包含以上模塊，上一個結構圖，更直觀一點：
安裝開發工具
當然首先就是安裝需要的開發工具包啦，一步一步、一個一個來。
在這過程中，我們需要理清需要什么工具，這些工具都是干什么的，為什么需要它。搞清楚這些很重要。
1. Visual Studio Code ，簡稱VS Code。
前端開發非常好用的一個代碼編輯器。直接下載安裝最新版即可。官網下載地址：https://code.visualstudio.com。
2. Node.js。
選擇對應版本下載安裝。我安裝的版本是v12.13.0。官網下載地址：https://nodejs.org/en/。
Node.js 這個項目最初是被稱為web.js，就是一個高性能的、基于事件循環的、輕量的web服務器，并提供了一套庫。后來項目的發展超出了預期，已經不再是一個單純的web服務器了，到現在已經發展為一個平臺，它是一個高性能的web服務器，它能解析JavaScript語言（內封了V8引擎），它提供了一套庫讓JS有了I/O能力，它還包含了一個軟件安裝包的管理工具npm，已經變成了一個構件網絡應用的基礎框架。所以，在node這個平臺上，你可以用JS去開發一些獨立的程序，就像python、java那樣，開發一些有I/O讀寫的可直接運行的程序（我們知道，沒有node之前，JS都只能在瀏覽器中運行，沒法開發獨立可運行的程序），更重要的是可以用JS去開發后端服務，這是一個巨大的變化和創新。從此JS不再局限于瀏覽器了。
從上面關于node的介紹來看，這個跟我們開發web程序好像沒有什么關系，web程序不需要node的啊。的確，我們開發的在瀏覽器中運行的web程序是不需要node的，但是我們在開發web程序的過程中，需要用到node。所以，我們要搞清楚：
生產環境并不需要node.js，只是開發的時候用。
生產環境不需要安裝node.js，我們只是開發web項目的時候會用到node.js?；趘ue開發的web項目，部署到生產環境的時候只需要通過CDN引入vue，或者將vue打包到項目中即可，當然如果用了其他的庫同樣需要引入。vue項目，其實就是個web項目，打包之后最終就是一些js文件、image文件和html文件。這些都是靜態的文件，可用web服務器來運行，通常是用nginx。
我們開發的時候需要調試web程序，那么需要把web程序在一個服務器中跑起來，一般會用到一個叫 webpack-dev-server 的服務器（下面介紹）。
項目開發完成后需要編譯打包，我們會用到 webpack（下面介紹）。
而這兩者都是基于node實現和運行的。管理依賴包需要npm，這也是node提供的。
所以，我們開發需要安裝node。
引申問題補充說明：
（1）webpack-dev-server 是一個采用 Node.js Express 實現的微型服務器, 內部使用 webpack-dev-middleware 來響應發送到服務器監聽端口的HTTP請求。它由webpack 提供，用于前端項目的本地開發和調試。詳見官方文檔：https://www.webpackjs.com/guides/development/#%E4%BD%BF%E7%94%A8-webpack-dev-server。
（2）Express 是一個保持最小規模的靈活的 Node.js Web 應用程序開發框架，為 Web 和移動應用程序提供一組強大的功能。Express 提供精簡的基本 Web 應用程序功能，而不會隱藏您了解和青睞的 Node.js 功能。
（3）Koa 是一個新的 web 框架，由 Express 幕后的原班人馬打造，致力于成為 web 應用和 API 開發領域中的一個更小、更富有表現力、更健壯的基石。 通過利用 async 函數，Koa 幫你丟棄回調函數，并有力地增強錯誤處理。 Koa 并沒有捆綁任何中間件， 而是提供了一套優雅的方法，幫助您快速而愉快地編寫服務端應用程序。
（4）關于package.json里面配置的依賴包，在打包的時候是否都會被打包到項目代碼中？記住，webpack打包是根據入口文件遞歸的去生成一個依賴圖，這圖中出現的文件才會被打包。簡單來說，就是項目中import的包才會被打包，而僅僅是在package.json里面配置的依賴包只會在npm install的時候安裝到node_modules目錄下面，那些在代碼中被import的包會從這個目錄下面尋找。
OK，安裝了 VS Code 和 Node.js 我們可以進行開發了。至于上面提到webpack 、webpack-dev-server 什么的，我們利用npm在項目中再安裝，而不是全局安裝到系統中。這些是項目依賴的東西。
框架項目結構
1.初始化項目
初始化項目需要用到一個叫做vue手腳架的工具 vue-cli 。
vue-cli 是 vue 的腳手架，用于生成一個基于vue和webpack的項目模板。說白了，就是vue-cli是一個軟件工具，利用它可以初始化生成一個vue項目，這個項目會有一些目錄結構、一些配置文件，并且是利用webpack去打包。此項目已經可以直接運行，接下來可以在此基礎上進行開發。
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 查看版本號?？赡軙龅綀箦e，大概是：xxxxxx因為在此系統上禁止運行腳本xxx。解決方法：以管理員身份運行powershell，輸入?set-ExecutionPolicy RemoteSigned ，接著輸入 Y 。
再來查看版本號，成功輸出：
一些補充說明：
（1）3.x 版本之后，vue-cli 的包名從 vue-cli 改成了 @vue/cli。3.x 版本新增了圖形化的方式來創建項目。
（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 ？答：不會的?？梢则炞C一下：
（4）不推薦全局安裝webpack，webpack 作為一個項目打包工具應該跟項目走，可以用不同的版本去打包項目。而且在項目中也沒有必要再去手動的安裝webpack，因為用vue-cli初始化項目的時候會安裝這些依賴包了，并且會生成一個?package.json 文件，此文件會記錄了生成環境和開發環境需要用到的一些依賴包，其中就會包含webpack，說明webpack已經安裝好了，當然也肯定會包含 vue 。這些依賴包都會下載安裝在項目中一個叫?node_modules 的文件夾里面。當你把node_modules文件刪除了，可以項目中運行 npm install ，便會根據?package.json 文件的記錄重新下載并安裝這些依賴包。
（5）webpack 是什么？webpack是一個模塊打包工具，可以使用webpack管理項目中的模塊依賴，并編繹輸出靜態文件。它能夠很好地管理、打包Web開發中所用到的HTML、Javascript、CSS以及各種靜態文件（圖片、字體等），讓開發過程更加高效。對于不同類型的資源，webpack有對應的模塊加載器loader。webpack模塊打包器會分析模塊間的依賴關系，最后生成優化且合并后的靜態資源。其插件功能提供了處理各種文件過程中的各個生命周期鉤子，使開發者能夠利用插件功能開發很多自定義的功能。詳看官網介紹：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 代碼檢測工具，格式、寫法等的檢查，可以規范化代碼；
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? ? ? ? ? ? ? ? ? # 存放靜態資源
└── test? ? ? ? ? ? ? ? ? ? # 單元測試代碼
├── .babelrc? ? ? ? ? ? ? ? # babel 配置文件
├── .editorconfig
├── .eslintignore
├── .eslintrc? ? ? ? ? ? ? ? # ESLint 配置文件
├── .gitignore
├── .postcssrc
├── index.html? ? ? ? ? ? ? # 首頁
├── package.json? ? ? ? ?# 需要的依賴包
├── package-lock.json? ?# 項目安裝的依賴包版本
└── README.md
我們打開 package.json 文件看看：
可以看到，我們在初始化項目的時候輸入的一些信息都記錄在這里了，指定了 vue 和 vue-router 版本 （符號 ^ 的作用是更新到主版本的最新版），一些開發的時候用到的依賴包。
繼續往下看：
可以看到，package.json 文件里面開發依賴包包含了 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. 按劃分的模塊調整項目結構
娃等我很久了，先跟他玩玩，今晚繼續這部分內容。
提取公共代碼：通用組件、公共方法、自動生成接口層文件的插件、http請求、數據存儲。
做成單獨的項目，打包編譯，然后在具體項目中引入。
總結
OK，萬事開頭難，這頭我們已經開好了。
本篇文章首先介紹了將要開發的前端框架主要包含配置模塊、HTTP請求模塊、接口層模塊、資源模塊、通用組件模塊、路由模塊、視圖模塊、存儲模塊、公共方法模塊、登錄模塊、權限模塊和一個自動生成接口層文件的插件。
接著介紹了需要的開發工具包并講解了每個工具的作用。
最后利用vue-cli初始化項目并調整目錄結構。還介紹了如何把webpack3升級到webpack4。
題外話：其實如果僅僅是為了跑起一個vue項目，可以簡單很多的，需要的工具都安裝新版本，初始化，運行即可。我這里整的這么復雜，一來，我比較喜歡舊的項目結構，二來，換webpack版本、換node版本等這些在工作中可能都會遇到，在這里可以找到答案，三來，折騰得越多，對用到的工具就更加了解。
備注：
1.項目未上傳GitHub （文章開頭的GitHub地址未添加），等調整完結構再上傳；
2.項目結構未調整；
3.項目的配置問題，等到后面處理配置模塊的時候再進行優化處理；軟件工程領域的經驗：不要過早的優化，在項目的初期不要把知道的優化點都加入到項目中，這樣會增加項目的復雜度而且也沒有多大的優化效果，等項目到了一定的規模，性能問題會隨之而來，然后再針對性的優化，效果自然是最理想的。
