PcBackStage

#PcBackStage

/$$$$$$$ /$$$$$$$ /$$ /$$$$$$ /$$
| $$__ $$ | $$__ $$ | $$ /$$__ $$ | $$
| $$ \ $$ /$$$$$$$| $$ \ $$ /$$$$$$ /$$$$$$$| $$ /$$| $$ __//$$$$$$ /$$$$$$ /$$$$$$ /$$$$$$ | $$$$$$$//$$__/| $$$$$$$ |_ $$ /$$___/| $$ /$$/| $$$$$$|_ $$_/ |__ $$ /$$__ $$ /$$__ $$ | $$__/| $$ | $$ $$ /$$$$$$$| $$ | $$$$$$/ ____ $$ | $$ /$$$$$$$| $$ \ $$| $$$$$$$$ | $$ | $$ | $$ \ $$ /$$__ $$| $$ | $$_ $$ /$$ \ $$ | $$ /$$ /$$__ $$| $$ | $$| $$___/ | $$ | $$$$$$$| $$$$$$$/| $$$$$$$| $$$$$$$| $$ \ $$| $$$$$$/ | $$$$/| $$$$$$$| $$$$$$$| $$$$$$$ |/ ____/|_/ _/ __/|/ __/ ____/ _/ ____/ _ $$ _______/

                                                                                     /$$  \ $$          
                                                                                    |  $$$$$$/          
                                                                                     \______/           

##常用的后台管理模板

基于 https://panjiachen.github.io/vue-element-admin-site/zh/guide/ 的版本， 只保留常用功能和修改部分UI效果

##安装：

###克隆项目

git clone git@git.beswell.com:duanchangpeng/PcBackStage.git

###进入项目目录

cd PcBackStage

##安装淘宝源，已安装可忽略

npm install --registry=https://registry.npm.taobao.org

###安装依赖

cnpm i

###本地开发 启动项目

npm run dev

##1.目录结构

├── build                      # 构建相关
├── mock                       # 项目mock 模拟数据
├── src                        # 源代码
│   ├── api                    # 所有请求
│   ├── assets                 # 主题 字体等静态资源
│   ├── components             # 全局公用组件
│   ├── directive              # 全局指令
│   ├── icons                  # 项目所有 svg icons
│   ├── lang                   # 国际化 language
│   ├── layout                 # 全局 layout  todo
│   ├── router                 # 路由
│   ├── store                  # 全局 store管理  todo
│   ├── utils                  # 全局公用方法
│   ├── vendor                 # 公用vendor todo
│   ├── views                  # views 所有页面
│   ├── App.vue                # 入口页面
│   ├── main.js                # 入口文件 加载组件 初始化等
├── .env.xxx                   # 环境变量配置
├── .eslintrc.js               # eslint 配置项
├── .babelrc                   # babel-loader 配置
├── .travis.yml                # 自动化CI配置
├── vue.config.js              # vue-cli 配置
├── postcss.config.js          # postcss 配置
└── package.json               # package.json

##4.使用方法

a.增加新页面

在views里新建一个vue文件，将文件名和路径加入router/index.js中，注意文件层级，非系统级别页面应加入main下的同级别里。  

b.新增接口

在api/getApiRes.js里添加方法，在使用页面，首先引入这个文件    
import { 新写的方法名 } from '../api/getApiRes.js'    
然后再methods里使用 新的方法名(param).then(res => {...})的形式调用  

c.反向代理

修改 vue.config.js 中   target: 'http://192.168.0.162:19080/', 的地址，重启npm run serve后生效

d.打包 配置打包地址，修改 vue.config.js 中 outputDir: 'D:/wwwroot/test/new_back/static_pc', 指向的地址， 在执行build命令后生效。

e.运行 使用nginx等程序驱动http服务，指向打包后的index.html文件所在地址即可。 （如打开后出现loading情况，均为后端数据源配置错误，搭建相应服务后即可，其他问题如没有配置本地host等）

=== todo ===