842a3eb0 by sunnie

提取layout,,统一代码风格,优化路由

1 parent 367c2519
1 import api from './index' 1 import api from './index'
2
3 // axios 2 // axios
4 import request from '@/utils/request' 3 import request from '@/utils/request'
5 4
......
1 @import './variables.scss'; 1 @import './variables.scss';
2 @import './mixin.scss'; 2 @import './mixin.scss';
3 3
4 html, 4 html,
5 body 5 body .app {
6 .app {
7 color: #333333; 6 color: #333333;
8 font-family: Arial, Helvetica, 'STHeiti STXihei', 'Microsoft YaHei', Tohoma, sans-serif; 7 font-family: Arial, Helvetica, 'STHeiti STXihei', 'Microsoft YaHei', Tohoma, sans-serif;
9 background-color: $background-color; 8 background-color: $background-color;
10 } 9 }
11
12 .app-container{
13 padding-bottom:50px;
14 }
...\ No newline at end of file ...\ No newline at end of file
10
11 .app-container {
12 padding-bottom: 50px;
13 }
......
1 <template>
2 <div class="app-containter">
3 <keep-alive v-if="$route.meta.keepAlive">
4 <router-view></router-view>
5 </keep-alive>
6 <router-view v-else></router-view>
7 </div>
8 </template>
9
10 <script>
11 export default {
12 name: 'AppLayout'
13 }
14 </script>
...@@ -8,15 +8,14 @@ import App from './App.vue' ...@@ -8,15 +8,14 @@ import App from './App.vue'
8 import router from './router' 8 import router from './router'
9 import store from './store' 9 import store from './store'
10 10
11 // 引入全局样式
12 import '@/assets/css/index.scss'
13 // 设置 js中可以访问 $cdn 11 // 设置 js中可以访问 $cdn
14 import { $cdn } from '@/config' 12 import { $cdn } from '@/config'
15 Vue.prototype.$cdn = $cdn 13 Vue.prototype.$cdn = $cdn
16 14
17 // 全局引入按需引入UI库 vant 15 // 全局引入按需引入UI库 vant
18 import '@/plugins/vant' 16 import '@/plugins/vant'
19 17 // 引入全局样式
18 import '@/assets/css/index.scss'
20 // 移动端适配 19 // 移动端适配
21 import 'lib-flexible/flexible.js' 20 import 'lib-flexible/flexible.js'
22 21
......
1 import Vue from 'vue' 1 import Vue from 'vue'
2 import Router from 'vue-router' 2 import Router from 'vue-router'
3 import { constantRouterMap } from '@/config/router.config' 3 import { constantRouterMap } from './router.config.js'
4 4
5 // hack router push callback 5 // hack router push callback
6 const originalPush = Router.prototype.push 6 const originalPush = Router.prototype.push
7 Router.prototype.push = function push (location, onResolve, onReject) { 7 Router.prototype.push = function push(location, onResolve, onReject) {
8 if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject) 8 if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
9 return originalPush.call(this, location).catch(err => err) 9 return originalPush.call(this, location).catch(err => err)
10 } 10 }
11 11
12 Vue.use(Router) 12 Vue.use(Router)
13 13
14 const createRouter = () => new Router({ 14 const createRouter = () =>
15 mode: 'history', 15 new Router({
16 base: process.env.BASE_URL, 16 mode: 'history',
17 scrollBehavior: () => ({ y: 0 }), 17 base: process.env.BASE_URL,
18 routes: constantRouterMap 18 scrollBehavior: () => ({ y: 0 }),
19 }) 19 routes: constantRouterMap
20 })
20 21
21 const router = createRouter() 22 const router = createRouter()
22 23
23 // Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465 24 // Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
24 export function resetRouter () { 25 export function resetRouter() {
25 const newRouter = createRouter() 26 const newRouter = createRouter()
26 router.matcher = newRouter.matcher // reset router 27 router.matcher = newRouter.matcher // reset router
27 } 28 }
......
...@@ -5,8 +5,7 @@ ...@@ -5,8 +5,7 @@
5 export const constantRouterMap = [ 5 export const constantRouterMap = [
6 { 6 {
7 path: '/', 7 path: '/',
8 name: 'index', 8 component: () => import('@/views/layouts/index'),
9 component: () => import('@/layouts/AppLayout'),
10 redirect: '/home', 9 redirect: '/home',
11 meta: { 10 meta: {
12 title: '首页', 11 title: '首页',
...@@ -14,27 +13,16 @@ export const constantRouterMap = [ ...@@ -14,27 +13,16 @@ export const constantRouterMap = [
14 }, 13 },
15 children: [ 14 children: [
16 { 15 {
17 path: '/', 16 path: '/home',
18 component: () => import('@/layouts/TabBarLayout'), 17 name: 'Home',
19 redirect: '/home', 18 component: () => import('@/views/home/index'),
20 meta: { 19 meta: { title: '首页', keepAlive: false }
21 title: '首页', 20 },
22 keepAlive: false 21 {
23 }, 22 path: '/about',
24 children: [ 23 name: 'About',
25 { 24 component: () => import('@/views/home/about'),
26 path: '/home', 25 meta: { title: '关于我', keepAlive: false }
27 name: 'Home',
28 component: () => import('@/views/home/index'),
29 meta: { title: '首页', keepAlive: false }
30 },
31 {
32 path: '/about',
33 name: 'About',
34 component: () => import('@/views/home/about'),
35 meta: { title: '关于我', keepAlive: false }
36 }
37 ]
38 } 26 }
39 ] 27 ]
40 } 28 }
......
1 <!-- home --> 1 <!-- home -->
2 <template> 2 <template>
3 <div class="app-container"> 3 <div class="about-container">
4 <div class="warpper"> 4 <div class="warpper">
5 <div class="list"> 5 <div class="list">
6 <div class="logo"></div> 6 <div class="logo"></div>
...@@ -46,8 +46,8 @@ export default { ...@@ -46,8 +46,8 @@ export default {
46 // 请求接口数据,仅作为展示,需要配置src->config下环境文件 46 // 请求接口数据,仅作为展示,需要配置src->config下环境文件
47 const params = { user: 'sunnie' } 47 const params = { user: 'sunnie' }
48 getUserInfo(params) 48 getUserInfo(params)
49 .then(() => {}) 49 .then(() => { })
50 .catch(() => {}) 50 .catch(() => { })
51 }, 51 },
52 // Action 通过 store.dispatch 方法触发 52 // Action 通过 store.dispatch 方法触发
53 doDispatch() { 53 doDispatch() {
...@@ -60,7 +60,7 @@ export default { ...@@ -60,7 +60,7 @@ export default {
60 } 60 }
61 </script> 61 </script>
62 <style lang="scss" scoped> 62 <style lang="scss" scoped>
63 .app-container { 63 .about-container {
64 background: #fff; 64 background: #fff;
65 height: 100vh; 65 height: 100vh;
66 box-sizing: border-box; 66 box-sizing: border-box;
......
1 <!-- home --> 1 <!-- home -->
2 <template> 2 <template>
3 <div class="app-container"> 3 <div class="index-container">
4 <div class="warpper"> 4 <div class="warpper">
5 <h1 class="demo-home__title"><img src="https://imgs.solui.cn/weapp/logo.png" /><span> VUE H5开发模板</span></h1> 5 <h1 class="demo-home__title"><img src="https://imgs.solui.cn/weapp/logo.png" /><span> VUE H5开发模板</span></h1>
6 <h2 class="demo-home__desc"> 6 <h2 class="demo-home__desc">
...@@ -39,13 +39,13 @@ export default { ...@@ -39,13 +39,13 @@ export default {
39 39
40 computed: {}, 40 computed: {},
41 41
42 mounted() {}, 42 mounted() { },
43 43
44 methods: {} 44 methods: {}
45 } 45 }
46 </script> 46 </script>
47 <style lang="scss" scoped> 47 <style lang="scss" scoped>
48 .app-container { 48 .index-container {
49 .warpper { 49 .warpper {
50 padding: 12px; 50 padding: 12px;
51 background: #fff; 51 background: #fff;
......
1 <template> 1 <template>
2 <div class="tabbar-layout-containter"> 2 <div class="app-container">
3 <div class="tabbar-layout-content"> 3 <div class="layout-content">
4 <keep-alive v-if="$route.meta.keepAlive"> 4 <keep-alive v-if="$route.meta.keepAlive">
5 <router-view></router-view> 5 <router-view></router-view>
6 </keep-alive> 6 </keep-alive>
7 <router-view v-else></router-view> 7 <router-view v-else></router-view>
8 </div> 8 </div>
9 <div class="tabbar-layout-footer"> 9 <div class="layout-footer">
10 <TabBar :data="tabbars" @change="handleChange" /> 10 <TabBar :data="tabbars" @change="handleChange" />
11 </div> 11 </div>
12 </div> 12 </div>
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
15 <script> 15 <script>
16 import TabBar from '@/components/TabBar' 16 import TabBar from '@/components/TabBar'
17 export default { 17 export default {
18 name: 'TabBarLayout', 18 name: 'AppLayout',
19 data() { 19 data() {
20 return { 20 return {
21 tabbars: [ 21 tabbars: [
......
...@@ -64,14 +64,13 @@ module.exports = { ...@@ -64,14 +64,13 @@ module.exports = {
64 // } 64 // }
65 }, 65 },
66 css: { 66 css: {
67 extract: IS_PROD, 67 extract: IS_PROD, //是否将组件中的 CSS 提取至一个独立的 CSS 文件中 (而不是动态注入到 JavaScript 中的 inline 代码)。
68 sourceMap: false, 68 sourceMap: false,
69 loaderOptions: { 69 loaderOptions: {
70 scss: { 70 scss: {
71 // 向全局sass样式传入共享的全局变量, $src可以配置图片cdn前缀 71 // 向全局sass样式传入共享的全局变量, $src可以配置图片cdn前缀
72 // 详情: https://cli.vuejs.org/guide/css.html#passing-options-to-pre-processor-loaders 72 // 详情: https://cli.vuejs.org/guide/css.html#passing-options-to-pre-processor-loaders
73 prependData: ` 73 prependData: `
74 @import "assets/css/index.scss";
75 @import "assets/css/mixin.scss"; 74 @import "assets/css/mixin.scss";
76 @import "assets/css/variables.scss"; 75 @import "assets/css/variables.scss";
77 $cdn: "${defaultSettings.$cdn}"; 76 $cdn: "${defaultSettings.$cdn}";
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!