diff --git a/README.en.md b/README.en.md index f409fd3..ca6e696 100644 --- a/README.en.md +++ b/README.en.md @@ -1,36 +1,43 @@ -# 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 - -#### 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 +#### 介绍 -#### Gitee Feature + 1. vuecli3.0 + 2. 多环境开发 + 3. axios封装 + 4. 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 + +#### 多环境 + + +之前写过一个多环境的方案，是基于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 + +#### rem适配方案 + +还是那句话，用vw还是用rem，这是个问题？ + +选用rem的原因是因为vant直接给到了这个适配方案，个人也比较喜欢这个方案 + +[vant](https://youzan.github.io/vant/#/zh-CN/quickstart) + + #### 总结 + +因为项目刚刚构建起来，后面还会持续更新，实际使用过程中一定还有很多问题，如果文章中有错误希望能够被指正，一起成长 + +# 关于我 + +您可以扫描添加下方的微信并备注 Soul 加交流群，给我提意见，交流学习。 +

+ +

+ +如果对你有帮助送我一颗小星星（づ￣3￣）づ╭❤～ \ No newline at end of file diff --git a/src/assets/css/element-ui.scss b/src/assets/css/element-ui.scss deleted file mode 100644 index 6af3bfd..0000000 --- a/src/assets/css/element-ui.scss +++ /dev/null @@ -1,44 +0,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 - } -} diff --git a/src/assets/css/index.scss b/src/assets/css/index.scss index 3b4da51..a936c44 100644 --- a/src/assets/css/index.scss +++ b/src/assets/css/index.scss @@ -1,8 +1,5 @@ @import './variables.scss'; @import './mixin.scss'; -@import './transition.scss'; -@import './element-ui.scss'; -@import './sidebar.scss'; body { height: 100%; diff --git a/src/assets/css/sidebar.scss b/src/assets/css/sidebar.scss deleted file mode 100644 index 3dad4c3..0000000 --- a/src/assets/css/sidebar.scss +++ /dev/null @@ -1,209 +0,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; - } - } -} diff --git a/src/assets/css/transition.scss b/src/assets/css/transition.scss deleted file mode 100644 index 4cb27cc..0000000 --- a/src/assets/css/transition.scss +++ /dev/null @@ -1,48 +0,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; -} diff --git a/src/config/env.development.js b/src/config/env.development.js index a7d42b2..b44a5f6 100644 --- a/src/config/env.development.js +++ b/src/config/env.development.js @@ -1,8 +1,8 @@ // 本地 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' } } diff --git a/src/config/env.production.js b/src/config/env.production.js index 3dc13c4..af1b668 100644 --- a/src/config/env.production.js +++ b/src/config/env.production.js @@ -1,8 +1,8 @@ // 正式 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' } } diff --git a/src/config/env.staging.js b/src/config/env.staging.js index f03c13c..3c6e338 100644 --- a/src/config/env.staging.js +++ b/src/config/env.staging.js @@ -1,7 +1,7 @@ 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' } } diff --git a/src/main.js b/src/main.js index c5f4a11..119470f 100644 --- a/src/main.js +++ b/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' diff --git a/src/views/home/index.vue b/src/views/home/index.vue index 93a0098..82c99a1 100644 --- a/src/views/home/index.vue +++ b/src/views/home/index.vue @@ -11,14 +11,14 @@ Button } from 'vant' export default { - data() { - return {}; - }, - components: { 'van-button': Button }, + data() { + return {} + }, + computed: {}, mounted() {},