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
1 # ant_yixiaobao_h5 1 # vue-h5-template
2 2
3 #### Description 3 基于vue-cli3.0+webpack 4+vant ui + sass+ rem适配方案+axios封装，构建手机端模板脚手架
4 蚁小宝微信公众账号开发vue h5
5 4
6 #### Software Architecture 5 #### 介绍
7 Software architecture description
8 6
9 #### Installation
10 7
11 1. xxxx 8 1. vuecli3.0
12 2. xxxx 9 2. 多环境开发
13 3. xxxx 10 3. axios封装
11 4. rem适配方案
14 12
15 #### Instructions
16 13
17 1. xxxx 14 #### 多环境
18 2. xxxx
19 3. xxxx
20 15
21 #### Contribution
22 16
23 1. Fork the repository 17 之前写过一个多环境的方案，是基于vue-cli2.0的 [vue多环境配置方案-传送门](https://segmentfault.com/a/1190000019136606)
24 2. Create Feat_xxx branch 18 最近新的项目采用了vuecli3.0开始了一番折腾
25 3. Commit your code
26 4. Create Pull Request
27 19
20 这里参考了[vue-admin-template](https://github.com/PanJiaChen/vue-admin-template) 基本思路不变
21 在src的文件里新建config 根据不同的环境去引用不同的配置文件，不同的是在根目录下有三个设置环境变量的文件
22 这里可以参考vue-admin-template
28 23
29 #### Gitee Feature 24 #### rem适配方案
30 25
31 1. You can use Readme\_XXX.md to support different languages, such as Readme\_en.md, Readme\_zh.md
32 2. Gitee blog [blog.gitee.com](https://blog.gitee.com)
33 3. Explore open source project [https://gitee.com/explore](https://gitee.com/explore)
34 4. The most valuable open source project [GVP](https://gitee.com/gvp)
35 5. The manual of Gitee [https://gitee.com/help](https://gitee.com/help)
36 6. The most popular members [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)
...\ No newline at end of file ...\ No newline at end of file
26 还是那句话，用vw还是用rem，这是个问题？
27
28 选用rem的原因是因为vant直接给到了这个适配方案，个人也比较喜欢这个方案
29
30 [vant](https://youzan.github.io/vant/#/zh-CN/quickstart)
31
32 #### 总结
33
34 因为项目刚刚构建起来，后面还会持续更新，实际使用过程中一定还有很多问题，如果文章中有错误希望能够被指正，一起成长
35
36 # 关于我
37
38 您可以扫描添加下方的微信并备注 Soul 加交流群，给我提意见，交流学习。
39 <p>
40 <img src="https://tweapp.top1buyer.com/mine.jpg" width="256" style="display:inline;">
41 </p>
42
43 如果对你有帮助送我一颗小星星（づ￣3￣）づ╭❤～
...\ No newline at end of file ...\ No newline at end of file
......
src/assets/css/element-ui.scss deleted 100644 → 0
1 // cover some element-ui styles
2
3 .el-breadcrumb__inner,
4 .el-breadcrumb__inner a {
5 font-weight: 400 !important;
6 }
7
8 .el-upload {
9 input[type="file"] {
10 display: none !important;
11 }
12 }
13
14 .el-upload__input {
15 display: none;
16 }
17
18
19 // to fixed https://github.com/ElemeFE/element/issues/2461
20 .el-dialog {
21 transform: none;
22 left: 0;
23 position: relative;
24 margin: 0 auto;
25 }
26
27 // refine element ui upload
28 .upload-container {
29 .el-upload {
30 width: 100%;
31
32 .el-upload-dragger {
33 width: 100%;
34 height: 200px;
35 }
36 }
37 }
38
39 // dropdown
40 .el-dropdown-menu {
41 a {
42 display: block
43 }
44 }
src/assets/css/index.scss
1 @import './variables.scss'; 1 @import './variables.scss';
2 @import './mixin.scss'; 2 @import './mixin.scss';
3 @import './transition.scss';
4 @import './element-ui.scss';
5 @import './sidebar.scss';
6 3
7 body { 4 body {
8 height: 100%; 5 height: 100%;
......
src/assets/css/sidebar.scss deleted 100644 → 0
1 #app {
2
3 .main-container {
4 min-height: 100%;
5 transition: margin-left .28s;
6 margin-left: $sideBarWidth;
7 position: relative;
8 }
9
10 .sidebar-container {
11 transition: width 0.28s;
12 width: $sideBarWidth !important;
13 background-color: $menuBg;
14 height: 100%;
15 position: fixed;
16 font-size: 0px;
17 top: 0;
18 bottom: 0;
19 left: 0;
20 z-index: 1001;
21 overflow: hidden;
22
23 // reset element-ui css
24 .horizontal-collapse-transition {
25 transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
26 }
27
28 .scrollbar-wrapper {
29 overflow-x: hidden !important;
30 }
31
32 .el-scrollbar__bar.is-vertical {
33 right: 0px;
34 }
35
36 .el-scrollbar {
37 height: 100%;
38 }
39
40 &.has-logo {
41 .el-scrollbar {
42 height: calc(100% - 50px);
43 }
44 }
45
46 .is-horizontal {
47 display: none;
48 }
49
50 a {
51 display: inline-block;
52 width: 100%;
53 overflow: hidden;
54 }
55
56 .svg-icon {
57 margin-right: 16px;
58 }
59
60 .el-menu {
61 border: none;
62 height: 100%;
63 width: 100% !important;
64 }
65
66 // menu hover
67 .submenu-title-noDropdown,
68 .el-submenu__title {
69 &:hover {
70 background-color: $menuHover !important;
71 }
72 }
73
74 .is-active>.el-submenu__title {
75 color: $subMenuActiveText !important;
76 }
77
78 & .nest-menu .el-submenu>.el-submenu__title,
79 & .el-submenu .el-menu-item {
80 min-width: $sideBarWidth !important;
81 background-color: $subMenuBg !important;
82
83 &:hover {
84 background-color: $subMenuHover !important;
85 }
86 }
87 }
88
89 .hideSidebar {
90 .sidebar-container {
91 width: 54px !important;
92 }
93
94 .main-container {
95 margin-left: 54px;
96 }
97
98 .submenu-title-noDropdown {
99 padding: 0 !important;
100 position: relative;
101
102 .el-tooltip {
103 padding: 0 !important;
104
105 .svg-icon {
106 margin-left: 20px;
107 }
108 }
109 }
110
111 .el-submenu {
112 overflow: hidden;
113
114 &>.el-submenu__title {
115 padding: 0 !important;
116
117 .svg-icon {
118 margin-left: 20px;
119 }
120
121 .el-submenu__icon-arrow {
122 display: none;
123 }
124 }
125 }
126
127 .el-menu--collapse {
128 .el-submenu {
129 &>.el-submenu__title {
130 &>span {
131 height: 0;
132 width: 0;
133 overflow: hidden;
134 visibility: hidden;
135 display: inline-block;
136 }
137 }
138 }
139 }
140 }
141
142 .el-menu--collapse .el-menu .el-submenu {
143 min-width: $sideBarWidth !important;
144 }
145
146 // mobile responsive
147 .mobile {
148 .main-container {
149 margin-left: 0px;
150 }
151
152 .sidebar-container {
153 transition: transform .28s;
154 width: $sideBarWidth !important;
155 }
156
157 &.hideSidebar {
158 .sidebar-container {
159 pointer-events: none;
160 transition-duration: 0.3s;
161 transform: translate3d(-$sideBarWidth, 0, 0);
162 }
163 }
164 }
165
166 .withoutAnimation {
167
168 .main-container,
169 .sidebar-container {
170 transition: none;
171 }
172 }
173 }
174
175 // when menu collapsed
176 .el-menu--vertical {
177 &>.el-menu {
178 .svg-icon {
179 margin-right: 16px;
180 }
181 }
182
183 .nest-menu .el-submenu>.el-submenu__title,
184 .el-menu-item {
185 &:hover {
186 // you can use $subMenuHover
187 background-color: $menuHover !important;
188 }
189 }
190
191 // the scroll bar appears when the subMenu is too long
192 >.el-menu--popup {
193 max-height: 100vh;
194 overflow-y: auto;
195
196 &::-webkit-scrollbar-track-piece {
197 background: #d3dce6;
198 }
199
200 &::-webkit-scrollbar {
201 width: 6px;
202 }
203
204 &::-webkit-scrollbar-thumb {
205 background: #99a9bf;
206 border-radius: 20px;
207 }
208 }
209 }
src/assets/css/transition.scss deleted 100644 → 0
1 // global transition css
2
3 /* fade */
4 .fade-enter-active,
5 .fade-leave-active {
6 transition: opacity 0.28s;
7 }
8
9 .fade-enter,
10 .fade-leave-active {
11 opacity: 0;
12 }
13
14 /* fade-transform */
15 .fade-transform-leave-active,
16 .fade-transform-enter-active {
17 transition: all .5s;
18 }
19
20 .fade-transform-enter {
21 opacity: 0;
22 transform: translateX(-30px);
23 }
24
25 .fade-transform-leave-to {
26 opacity: 0;
27 transform: translateX(30px);
28 }
29
30 /* breadcrumb transition */
31 .breadcrumb-enter-active,
32 .breadcrumb-leave-active {
33 transition: all .5s;
34 }
35
36 .breadcrumb-enter,
37 .breadcrumb-leave-active {
38 opacity: 0;
39 transform: translateX(20px);
40 }
41
42 .breadcrumb-move {
43 transition: all .5s;
44 }
45
46 .breadcrumb-leave-active {
47 position: absolute;
48 }
src/config/env.development.js
1 // 本地 1 // 本地
2 module.exports = { 2 module.exports = {
3 title: '蚁小宝', 3 title: 'vue-h5-template',
4 api: { 4 api: {
5 base_api: 'https://t1.top1buyer.com/admin', 5 base_api: 'https://xxx.xxx.com/admin',
6 common_api: 'https://t.top1buyer.com/common' 6 common_api: 'https://xxx.xxx.com/common'
7 } 7 }
8 } 8 }
......
src/config/env.production.js
1 // 正式 1 // 正式
2 module.exports = { 2 module.exports = {
3 title: '蚁小宝', 3 title: 'vue-h5-template',
4 api: { 4 api: {
5 base_api: 'https://t1.top1buyer.com/admin', 5 base_api: 'https://xxx.xxx.com/admin',
6 common_api: 'https://t.top1buyer.com/common' 6 common_api: 'https://xxx.xxx.com/common'
7 } 7 }
8 } 8 }
......
src/config/env.staging.js
1 module.exports = { 1 module.exports = {
2 title: '蚁小宝', 2 title: 'vue-h5-template',
3 api: { 3 api: {
4 base_api: 'https://t1.top1buyer.com/admin', 4 base_api: 'https://xxx.xxx.com/admin',
5 common_api: 'https://t.top1buyer.com/common' 5 common_api: 'https://xxx.xxx.com/common'
6 } 6 }
7 } 7 }
......
src/main.js
...@@ -2,8 +2,8 @@ import Vue from 'vue' ...@@ -2,8 +2,8 @@ import Vue from 'vue'
2 2
3 import 'normalize.css/normalize.css' // A modern alternative to CSS resets 3 import 'normalize.css/normalize.css' // A modern alternative to CSS resets
4 import '@/assets/css/index.scss' // global css 4 import '@/assets/css/index.scss' // global css
5 //移动端适配 5 // 移动端适配
6 import "lib-flexible/flexible.js" 6 import 'lib-flexible/flexible.js'
7 import App from './App' 7 import App from './App'
8 import store from './store' 8 import store from './store'
9 import router from './router' 9 import router from './router'
......
src/views/home/index.vue
...@@ -11,14 +11,14 @@ ...@@ -11,14 +11,14 @@
11 Button 11 Button
12 } from 'vant' 12 } from 'vant'
13 export default { 13 export default {
14 data() {
15 return {};
16 },
17
18 components: { 14 components: {
19 'van-button': Button 15 'van-button': Button
20 }, 16 },
21 17
18 data() {
19 return {}
20 },
21
22 computed: {}, 22 computed: {},
23 23
24 mounted() {}, 24 mounted() {},
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!