整合 vue-element-template

简介

vueAdmin-template是基于vue-element-admin的一套后台管理系统基础模板（最少精简版），可作为模板进行二次开发。

GitHub地址：地址

建议：你可以在 vue-admin-template 的基础上进行二次开发，把 vue-element-admin当做工具箱，想要什么功能或者组件就去 vue-element-admin 那里复制过来。

安装

# 解压压缩包
# 进入目录
cd vue-admin-template-master

# 安装依赖
npm install

# 启动。执行后，浏览器自动弹出并访问http://localhost:9528/
npm run dev

关键文件

 1. package.js

1.  启动项目的命令： npm run dev
2. 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

 

8. 端口号

在 config/index.js中修改

port: 9528,

9. 国际化设置

src/main.js，第7行，修改语言为 zh-CN，使用中文语言环境，例如：日期时间组件

import locale from 'element-ui/lib/locale/lang/zh-CN' // lang i18n