提取layout,,统一代码风格,优化路由
Showing
10 changed files
with
41 additions
and
70 deletions
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 | } | ... | ... |
src/layouts/AppLayout.vue
deleted
100644 → 0
... | @@ -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}"; | ... | ... |
-
Please register or sign in to post a comment