目录标题
1、目录结构
vue-element-admin-master(拥有完整的功能的插件)
2、关键文件
vue-admin-template-master(源码相对简单,我们的后台管理系统基于这个版本)
2.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.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的页面中
2.3 index.html
项目默认的html页面
2.4 src/main.js
项目js入口文件,项目的所有前端功能都在这个文件中引入和定义,并初始化全局的Vue对象
2.5 config/dev.env.js
定义全局常量值
因此,在项目中的任意位置可以直接使用 process.env.BASE_API 常量表示后端接口的主机地址
2.6 src/utils/request.js
引入axios模块,定义全局的axios实例,并导出模块
2.7 src/api/login.js
引用request模块,调用远程api