基于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.项目的配置问题，等到后面处理配置模块的时候再进行优化处理；软件工程领域的经验：不要过早的优化，在项目的初期不要把知道的优化点都加入到项目中，这样会增加项目的复杂度而且也没有多大的优化效果，等项目到了一定的规模，性能问题会随之而来，然后再针对性的优化，效果自然是最理想的。