基于vue的企业级可用前端框架（开篇）
哇，很久没有写文章（总结）了。最近稍微有了一点点时间，也想对自己学习的知识进行系统性的总结。那么就开始搞一个有点用的东西吧：一行一行代码写一个基于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。
VS Code
2. Node.js。
选择对应版本下载安装。我安装的版本是v12.13.0。官网下载地址：https://nodejs.org/en/。
安装的node版本以及包含的npm版本
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。基于vue开发的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 查看版本号。可能会遇到报错，大概是：xxxxxx因为在此系统上禁止运行脚本xxx。解决方法：以管理员身份运行powershell，输入 set-ExecutionPolicy RemoteSigned ，接着输入 Y 。
解决输入 vue -V 报错
再来查看版本号，成功输出：
查看 vue-cli 版本号
一些补充说明：
（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 ？答：不会的。可以验证一下：
并未安装webpack
（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 。
安装旧版本的 vue init 功能
OK，一切准备就绪，开始初始化项目，输入 vue init webpack admin-web-front 。
其中：vue init 是指令，webpack 是模板类型，admin-web-front 是项目名称。指令形式是 vue init <template-name> <project-name>，两种常用的模板类型： webpack-simple 和 webpack。
初始化 vue 项目
说明：
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 // 端到端测试；
初始化完成，查看项目目录：
初始化 vue 项目
目录结构说明：
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 文件看看：
package.json 文件
可以看到，我们在初始化项目的时候输入的一些信息都记录在这里了，指定了 vue 和 vue-router 版本 （符号 ^ 的作用是更新到主版本的最新版），一些开发的时候用到的依赖包。
继续往下看：
package.json 文件
可以看到，package.json 文件里面开发依赖包包含了 webpack ，大版本是3。说明已经安装好 webpack了，所以这就是为什么前面会提到我们不需要在项目中再去手动的安装webpack。即使把依赖包删除了，我们只要运行 npm install 命令，package.json 里面记录的依赖包都会被安装。
OK，来验证一下：
首先看看是否安装了 webpack ：
运行 npm run build，打包此vue项目：
测试 webpack 打包项目
项目目录中多了一个dist文件夹，里面有打包后的文件
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 （灰色底色的部分是修改的地方）：
替换 extract-text-webpack-plugin
替换 extract-text-webpack-plugin
替换 extract-text-webpack-plugin
（3）删除 webpack.optimize.CommonsChunkPlugin 相关配置，修改文件：build/webpack.prod.conf.js （灰色底色的部分是修改的地方）：
删除 webpack.optimize.CommonsChunkPlugin 相关配置
（4）增加 optimization 配置，修改文件：build/webpack.prod.conf.js （灰色底色的部分是修改的地方）：
增加 optimization 配置
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 （灰色底色的部分是修改的地方）：
修改 utils 配置
修改 utils 配置
（6）增加 mode 配置，修改文件：build/webpack.base.conf.js（灰色底色的部分是修改的地方）：
增加 mode 配置
（7）在 .babelrc 文件添加 transform-es2015-modules-commonjs，主要是解决 export 和 import 共用导致不兼容而引起的错误：
添加 transform-es2015-modules-commonjs
最后，删除 package-lock.json 文件和 node_modules目录，最后运行 npm install ，等待安装完成即可。
OK， 一切都改好了，我们来跑起初始化的vue项目，运行 npm run dev。
跑起项目
在浏览器输入：http://localhost:8080 ，OK，可以看到项目已经跑起来并且可以访问了：
访问初始化的vue项目
3. 按划分的模块调整项目结构
娃等我很久了，先跟他玩玩，今晚继续这部分内容。
提取公共代码：通用组件、公共方法、自动生成接口层文件的插件、http请求、数据存储。
做成单独的项目，打包编译，然后在具体项目中引入。
总结
OK，万事开头难，这头我们已经开好了。
本篇文章首先介绍了将要开发的前端框架主要包含配置模块、HTTP请求模块、接口层模块、资源模块、通用组件模块、路由模块、视图模块、存储模块、公共方法模块、登录模块、权限模块和一个自动生成接口层文件的插件。
接着介绍了需要的开发工具包并讲解了每个工具的作用。
最后利用vue-cli初始化项目并调整目录结构。还介绍了如何把webpack3升级到webpack4。
题外话：其实如果仅仅是为了跑起一个vue项目，可以简单很多的，需要的工具都安装新版本，初始化，运行即可。我这里整的这么复杂，一来，我比较喜欢旧的项目结构，二来，换webpack版本、换node版本等这些在工作中可能都会遇到，在这里可以找到答案，三来，折腾得越多，对用到的工具就更加了解。
备注：
1.项目未上传GitHub （文章开头的GitHub地址未添加），等调整完结构再上传；
2.项目结构未调整；
3.项目的配置问题，等到后面处理配置模块的时候再进行优化处理；软件工程领域的经验：不要过早的优化，在项目的初期不要把知道的优化点都加入到项目中，这样会增加项目的复杂度而且也没有多大的优化效果，等项目到了一定的规模，性能问题会随之而来，然后再针对性的优化，效果自然是最理想的。
