前端项目架构分析

一 目录结构

├── build                      // 构建相关  
├── config                     // 配置相关
├── src                        // 源代码
│   ├── api                    // 所有请求
│   ├── assets                 // 主题 字体等静态资源
│   ├── components             // 全局公用组件
│   ├── directive              // 全局指令
│   ├── filtres                // 全局 filter
│   ├── icons                  // 项目所有 svg icons
│   ├── lang                   // 国际化 language
│   ├── mock                   // 项目mock 模拟数据
│   ├── router                 // 路由
│   ├── store                  // 全局 store管理
│   ├── styles                 // 全局样式
│   ├── utils                  // 全局公用方法
│   ├── vendor                 // 公用vendor
│   ├── views                   // view
│   ├── App.vue                // 入口页面
│   ├── main.js                // 入口 加载组件 初始化等
│   └── permission.js          // 权限管理
├── static                     // 第三方不打包资源
│   └── Tinymce                // 富文本
├── .babelrc                   // babel-loader 配置
├── .eslintrc.js                // eslint 配置项
├── .gitignore                 // git 忽略项
├── favicon.ico                // favicon图标
├── index.html                 // html模板
└── package.json               // package.json

二 关键文件

vue-admin-template-master（源码相对简单，我们的后台管理系统基于这个版本）

1 package.js

npm项目的核心配置文件，包含项目信息，项目依赖，项目启动相关脚本

启动项目的命令： npm run dev

dev脚本：webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

• webpack-dev-server：一个小型的基于Node.js的http服务器，可以运行前端项目

• --inline：一种启动模式

• --progress：显示启动进度

• --config build/webpack.dev.conf.js：指定webpack配置文件所在位置

2 build/webpack.dev.conf.js

webpack配置文件，包含项目在开发环境打包和运行的相关配置

• webpack.dev.conf.js 中引用了 webpack.base.conf.js

• webpack.base.conf.js 中定义了项目打包的入口文件

在HtmlWebpackPlugin配置html模板，生成的js就会自动插入到模板中，如下面的配置。

因此生成的js文件会被自动插入到名为index.html的页面中

3 index.html

项目默认的html页面

4 src/main.js

项目js入口文件，项目的所有前端功能都在这个文件中引入和定义，并初始化全局的Vue对象

5 config/dev.env.js

定义全局常量值

因此，在项目中的任意位置可以直接使用 process.env.BASE_API 常量表示后端接口的主机地址

6 src/utils/request.js

引入axios模块，定义全局的axios实例，并导出模块

7 src/api/login.js

引用request模块，调用远程api