wangqing
5 years ago
13 changed files with 443 additions and 270 deletions
@ -1,24 +1,64 @@ |
|||
# tduck-front |
|||
# Tduck-WEB |
|||
|
|||
## 这是什么 |
|||
 |
|||
TDuck 前端源码 |
|||
|
|||
tduck-front 前端项目 |
|||
#### 项目源码 |
|||
|
|||
## 特点 |
|||
| 后端源码 | 前端源码 | |
|||
|--- | --- | |
|||
| https://gitee.com/TDuckApp/tduck-platform | https://gitee.com/TDuckApp/tduck-front | |
|||
|
|||
- 默认集成 vue-router 和 vuex |
|||
- 全局 SASS 资源自动引入 |
|||
- 精灵图自动生成 |
|||
- 全局组件自动注册 |
|||
- CDN支持，优化打包体积 |
|||
- 轻松实现团队代码规范 |
|||
|
|||
## 目录简介 |
|||
#### Build Setup |
|||
``` bash |
|||
# 配置镜像加速 |
|||
https://www.ydyno.com/archives/1219.html |
|||
|
|||
# 安装依赖 |
|||
npm install |
|||
|
|||
# 启动服务 localhost:8013 |
|||
npm run serve |
|||
|
|||
# 构建生产环境 |
|||
npm run build |
|||
``` |
|||
|
|||
#### 常见问题 |
|||
|
|||
1、linux 系统在安装依赖的时候会出现 node-sass 无法安装的问题 |
|||
|
|||
解决方案： |
|||
``` |
|||
1. 单独安装：npm install --unsafe-perm node-sass |
|||
2. 直接使用：npm install --unsafe-perm |
|||
``` |
|||
|
|||
2、加速node-sass安装 |
|||
|
|||
https://www.ydyno.com/archives/1219.html |
|||
|
|||
|
|||
#### 目录简介 |
|||
- api axios 封装 |
|||
- assets 静态资源 |
|||
- components 公共组件 |
|||
- router 路由 |
|||
- store vuex |
|||
- theme elementui主题 |
|||
- theme elementui主题 |
|||
- util 工具类 |
|||
- views 页面 |
|||
|
|||
|
|||
#### 特别鸣谢 |
|||
|
|||
|
|||
- 感谢 (https://gitee.com/eoner/vue-automation) 前端脚手架 |
|||
|
|||
- 感谢 (https://gitee.com/TDuckApp/form-generator) 表单生成器 |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
@ -0,0 +1,91 @@ |
|||
<template> |
|||
<div v-loading="createProjectLoading" class="template-preview-container"> |
|||
<div class="back-view"> |
|||
<el-button size="mini" round @click="$router.back(-1)"> |
|||
<i class="el-icon-arrow-left" /> |
|||
返回 |
|||
</el-button> |
|||
</div> |
|||
<div class="template-preview-content"> |
|||
<el-scrollbar style="height: 90vh;"> |
|||
<project-form |
|||
v-if="projectConfig.projectKey" |
|||
:project-config="projectConfig" |
|||
@submit="submitForm" |
|||
/> |
|||
</el-scrollbar> |
|||
<div style="margin: 20px;"> |
|||
<el-button |
|||
type="primary" |
|||
@click="createProjectByTemplate" |
|||
> |
|||
使用该模板 |
|||
</el-button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import ProjectForm from '@/views/form/ProjectForm' |
|||
|
|||
export default { |
|||
name: 'TemplatePreview', |
|||
components: { |
|||
ProjectForm |
|||
}, |
|||
props: {}, |
|||
data() { |
|||
return { |
|||
createProjectLoading: false, |
|||
projectConfig: { |
|||
projectKey: '', |
|||
preview: false, |
|||
projectKind: 2, |
|||
showBtns: true |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.projectConfig.projectKey = this.$route.query.key |
|||
}, |
|||
methods: { |
|||
createProjectByTemplate() { |
|||
this.createProjectLoading = true |
|||
this.$api.post('/user/project/template/create/', {'key': this.projectConfig.projectKey}).then(res => { |
|||
this.createProjectLoading = false |
|||
if (res.data) { |
|||
this.$router.push({path: '/project/form', query: {key: res.data, active: 1}}) |
|||
} |
|||
}).catch(res => { |
|||
console.log(res) |
|||
this.createProjectLoading = false |
|||
}) |
|||
}, |
|||
submitForm() { |
|||
|
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.template-preview-container { |
|||
display: flex; |
|||
width: 100%; |
|||
height: 100%; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
align-content: center; |
|||
overflow-y: hidden; |
|||
} |
|||
.back-view { |
|||
display: flex; |
|||
width: 80%; |
|||
align-content: flex-start; |
|||
margin: 10px; |
|||
} |
|||
.template-preview-content { |
|||
display: flex; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue