https://github.com/shenfe/vue-eleme-tpl
A common management system frontend boilerplate.
https://github.com/shenfe/vue-eleme-tpl
cms element-ui frontend management-system vue
Last synced: about 1 year ago
JSON representation
A common management system frontend boilerplate.
- Host: GitHub
- URL: https://github.com/shenfe/vue-eleme-tpl
- Owner: shenfe
- License: mit
- Created: 2017-12-01T17:53:35.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-07-30T03:49:38.000Z (almost 8 years ago)
- Last Synced: 2025-03-18T03:28:28.707Z (over 1 year ago)
- Topics: cms, element-ui, frontend, management-system, vue
- Language: Vue
- Homepage:
- Size: 183 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-eleme-tpl
> 基于Vue.js框架及其下衍生类库，实现单页面应用。
## 特性
* 使用Vue全家桶
* 使用element-ui作为基础组件库
* 使用axios请求后端接口
* 使用v-charts渲染图表（基于echarts封装）
* 支持markdown直接写页面组件！
* 支持json配置页面表单组件！
* 支持yaml配置接口！
* 开发、测试、线上三种环境
## 命令
### 本地开发
```
$ npm run serve
```
### 为生产环境打包
```
$ npm run build
```
### 启动测试服务器
```
$ npm test
```
## 文件结构
| 角色 | 目录 | 备注 |
| :---: | :--- | :--- |
| 发布的资源 | dist | 前端所有对外发布的静态资源文件，都在这里 |
| 公共静态资源 | public | 打包后会并入dist |
| 源码 | src | |
| 前端路由 | src/router | 单页应用的页面路由由前端控制 |
| 后端接口调用 | src/api | |
| 页面组件 | src/view | 构成页面的大组件，参与路由 |
| 根组件 | src/view/index.vue | 页面主框架 |
| 模块组件 | src/component | 页面内划分的组件 |
| 资源文件 | src/asset | 其他公共资源，如图片，字体，公共样式，第三方库等 |
| mock数据 | mock | 定义接口假数据，用于前端开发及前后端联调，与`src/api`相配合 |
## 开发
### 接口联调
开发环境下，在`vue.config.js`的`devServer`中配置前端本地开发服务器的端口号；另外，前端请求后端接口时，域和端口可能有别于前端devServer，如果需要，则在`src/api/index.js`的API_URL里改动。
### 页面
1. 在view中新建页面级组件
2. 根据实际情况，适当将页面划分为组件，在component下；并在页面组件中配置子路由
3. 在router中添加该页面及对应路由路径
### 全局状态&发布订阅
在组件中设置状态：
```js
this.$store.set('a.b.c', 1)
```
在组件中获取状态：
```js
this.$store.get('a.b.c')
```
在组件中订阅状态：
```js
this.$store.watch('a.b.c', v => {
console.log(`got a.b.c`, v)
})
```
### 图表
使用[v-charts](https://v-charts.js.org)。