Skip to content

xqz / dianDemo

Go to a project
Toggle navigation
Toggle navigation pinning
a65a25d7 by 406803045
Options

净化文档

1 parent 1b448e79
Inline Side-by-side
Showing 10 changed files with 47 additions and 344 deletions
README.en.md
# ant_yixiaobao_h5
# vue-h5-template
#### Description
蚁小宝微信公众账号开发vue h5
基于vue-cli3.0+webpack 4+vant ui + sass+ rem适配方案+axios封装，构建手机端模板脚手架
#### Software Architecture
Software architecture description
#### 介绍
#### Installation
1. xxxx
2. xxxx
3. xxxx
1. vuecli3.0
2. 多环境开发
3. axios封装
4. rem适配方案
#### Instructions
1. xxxx
2. xxxx
3. xxxx
#### 多环境
#### Contribution
1. Fork the repository
2. Create Feat_xxx branch
3. Commit your code
4. Create Pull Request
之前写过一个多环境的方案，是基于vue-cli2.0的 [vue多环境配置方案-传送门](https://segmentfault.com/a/1190000019136606)
最近新的项目采用了vuecli3.0开始了一番折腾
这里参考了[vue-admin-template](https://github.com/PanJiaChen/vue-admin-template) 基本思路不变
在src的文件里新建config 根据不同的环境去引用不同的配置文件，不同的是在根目录下有三个设置环境变量的文件
这里可以参考vue-admin-template
#### Gitee Feature
#### rem适配方案
1. You can use Readme\_XXX.md to support different languages, such as Readme\_en.md, Readme\_zh.md
2. Gitee blog [blog.gitee.com](https://blog.gitee.com)
3. Explore open source project [https://gitee.com/explore](https://gitee.com/explore)
4. The most valuable open source project [GVP](https://gitee.com/gvp)
5. The manual of Gitee [https://gitee.com/help](https://gitee.com/help)
6. The most popular members [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)
\ No newline at end of file
还是那句话，用vw还是用rem，这是个问题？
选用rem的原因是因为vant直接给到了这个适配方案，个人也比较喜欢这个方案
[vant](https://youzan.github.io/vant/#/zh-CN/quickstart)
#### 总结
因为项目刚刚构建起来，后面还会持续更新，实际使用过程中一定还有很多问题，如果文章中有错误希望能够被指正，一起成长
# 关于我
您可以扫描添加下方的微信并备注 Soul 加交流群，给我提意见，交流学习。
<p>
<img src="https://tweapp.top1buyer.com/mine.jpg" width="256" style="display:inline;">
</p>
如果对你有帮助送我一颗小星星（づ￣3￣）づ╭❤～
\ No newline at end of file
......
src/assets/css/element-ui.scss deleted 100644 → 0
// cover some element-ui styles
.el-breadcrumb__inner,
.el-breadcrumb__inner a {
font-weight: 400 !important;
}
.el-upload {
input[type="file"] {
display: none !important;
}
}
.el-upload__input {
display: none;
}
// to fixed https://github.com/ElemeFE/element/issues/2461
.el-dialog {
transform: none;
left: 0;
position: relative;
margin: 0 auto;
}
// refine element ui upload
.upload-container {
.el-upload {
width: 100%;
.el-upload-dragger {
width: 100%;
height: 200px;
}
}
}
// dropdown
.el-dropdown-menu {
a {
display: block
}
}
src/assets/css/index.scss
@import './variables.scss';
@import './mixin.scss';
@import './transition.scss';
@import './element-ui.scss';
@import './sidebar.scss';
body {
height: 100%;
......
src/assets/css/sidebar.scss deleted 100644 → 0
#app {
.main-container {
min-height: 100%;
transition: margin-left .28s;
margin-left: $sideBarWidth;
position: relative;
}
.sidebar-container {
transition: width 0.28s;
width: $sideBarWidth !important;
background-color: $menuBg;
height: 100%;
position: fixed;
font-size: 0px;
top: 0;
bottom: 0;
left: 0;
z-index: 1001;
overflow: hidden;
// reset element-ui css
.horizontal-collapse-transition {
transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
}
.scrollbar-wrapper {
overflow-x: hidden !important;
}
.el-scrollbar__bar.is-vertical {
right: 0px;
}
.el-scrollbar {
height: 100%;
}
&.has-logo {
.el-scrollbar {
height: calc(100% - 50px);
}
}
.is-horizontal {
display: none;
}
a {
display: inline-block;
width: 100%;
overflow: hidden;
}
.svg-icon {
margin-right: 16px;
}
.el-menu {
border: none;
height: 100%;
width: 100% !important;
}
// menu hover
.submenu-title-noDropdown,
.el-submenu__title {
&:hover {
background-color: $menuHover !important;
}
}
.is-active>.el-submenu__title {
color: $subMenuActiveText !important;
}
& .nest-menu .el-submenu>.el-submenu__title,
& .el-submenu .el-menu-item {
min-width: $sideBarWidth !important;
background-color: $subMenuBg !important;
&:hover {
background-color: $subMenuHover !important;
}
}
}
.hideSidebar {
.sidebar-container {
width: 54px !important;
}
.main-container {
margin-left: 54px;
}
.submenu-title-noDropdown {
padding: 0 !important;
position: relative;
.el-tooltip {
padding: 0 !important;
.svg-icon {
margin-left: 20px;
}
}
}
.el-submenu {
overflow: hidden;
&>.el-submenu__title {
padding: 0 !important;
.svg-icon {
margin-left: 20px;
}
.el-submenu__icon-arrow {
display: none;
}
}
}
.el-menu--collapse {
.el-submenu {
&>.el-submenu__title {
&>span {
height: 0;
width: 0;
overflow: hidden;
visibility: hidden;
display: inline-block;
}
}
}
}
}
.el-menu--collapse .el-menu .el-submenu {
min-width: $sideBarWidth !important;
}
// mobile responsive
.mobile {
.main-container {
margin-left: 0px;
}
.sidebar-container {
transition: transform .28s;
width: $sideBarWidth !important;
}
&.hideSidebar {
.sidebar-container {
pointer-events: none;
transition-duration: 0.3s;
transform: translate3d(-$sideBarWidth, 0, 0);
}
}
}
.withoutAnimation {
.main-container,
.sidebar-container {
transition: none;
}
}
}
// when menu collapsed
.el-menu--vertical {
&>.el-menu {
.svg-icon {
margin-right: 16px;
}
}
.nest-menu .el-submenu>.el-submenu__title,
.el-menu-item {
&:hover {
// you can use $subMenuHover
background-color: $menuHover !important;
}
}
// the scroll bar appears when the subMenu is too long
>.el-menu--popup {
max-height: 100vh;
overflow-y: auto;
&::-webkit-scrollbar-track-piece {
background: #d3dce6;
}
&::-webkit-scrollbar {
width: 6px;
}
&::-webkit-scrollbar-thumb {
background: #99a9bf;
border-radius: 20px;
}
}
}
src/assets/css/transition.scss deleted 100644 → 0
// global transition css
/* fade */
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.28s;
}
.fade-enter,
.fade-leave-active {
opacity: 0;
}
/* fade-transform */
.fade-transform-leave-active,
.fade-transform-enter-active {
transition: all .5s;
}
.fade-transform-enter {
opacity: 0;
transform: translateX(-30px);
}
.fade-transform-leave-to {
opacity: 0;
transform: translateX(30px);
}
/* breadcrumb transition */
.breadcrumb-enter-active,
.breadcrumb-leave-active {
transition: all .5s;
}
.breadcrumb-enter,
.breadcrumb-leave-active {
opacity: 0;
transform: translateX(20px);
}
.breadcrumb-move {
transition: all .5s;
}
.breadcrumb-leave-active {
position: absolute;
}
src/config/env.development.js
// 本地
module.exports = {
title: '蚁小宝',
title: 'vue-h5-template',
api: {
base_api: 'https://t1.top1buyer.com/admin',
common_api: 'https://t.top1buyer.com/common'
base_api: 'https://xxx.xxx.com/admin',
common_api: 'https://xxx.xxx.com/common'
}
}
......
src/config/env.production.js
// 正式
module.exports = {
title: '蚁小宝',
title: 'vue-h5-template',
api: {
base_api: 'https://t1.top1buyer.com/admin',
common_api: 'https://t.top1buyer.com/common'
base_api: 'https://xxx.xxx.com/admin',
common_api: 'https://xxx.xxx.com/common'
}
}
......
src/config/env.staging.js
module.exports = {
title: '蚁小宝',
title: 'vue-h5-template',
api: {
base_api: 'https://t1.top1buyer.com/admin',
common_api: 'https://t.top1buyer.com/common'
base_api: 'https://xxx.xxx.com/admin',
common_api: 'https://xxx.xxx.com/common'
}
}
......
src/main.js
......@@ -2,8 +2,8 @@ import Vue from 'vue'
import 'normalize.css/normalize.css' // A modern alternative to CSS resets
import '@/assets/css/index.scss' // global css
//移动端适配
import "lib-flexible/flexible.js"
// 移动端适配
import 'lib-flexible/flexible.js'
import App from './App'
import store from './store'
import router from './router'
......
src/views/home/index.vue
......@@ -11,14 +11,14 @@
Button
} from 'vant'
export default {
data() {
return {};
},
components: {
'van-button': Button
},
data() {
return {}
},
computed: {},
mounted() {},
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!