(转载)vue-admin-template笔记（一）

最新推荐文章于 2024-05-12 17:27:17 发布

jamey8383

最新推荐文章于 2024-05-12 17:27:17 发布

阅读量185

点赞数

分类专栏： Vue

原文链接：https://blog.csdn.net/seedcup/article/details/84891225

版权

Vue 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

文章目录
Vue学习笔记（一）
初步印象
子模块
main.js
App.vue
router
总结
参考
Vue学习笔记（一）
学习vue-admin-template
https://github.com/PanJiaChen/vue-admin-template

初步印象
src目录如下
.
├── App.vue
├── api
├── assets
├── components
├── icons
├── main.js
├── permission.js
├── router
├── store
├── styles
├── utils
└── views

子模块
main.js
import Vue from 'vue'

import 'normalize.css/normalize.css' // A modern alternative to CSS resets

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import locale from 'element-ui/lib/locale/lang/zh-CN' // lang i18n

import '@/styles/index.scss' // global css

import App from './App'
import router from './router'
import store from './store'

import '@/icons' // icon
import '@/permission' // permission control

Vue.use(ElementUI, { locale })

Vue.config.productionTip = false

new Vue({
el: '#app',
router,
store,
render: h => h(App)
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
新术语解读：

normalize.css
Normalize.css只是一个很小的css文件，但它在磨人的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset,Normalize.css是一种现代的、为HTML5准备的优质替代方案。总之，Normalize.css是一种CSS reset的替代方案。
我们创造normalize.css有下面这几个目的：

保护有用的浏览器样式而不是去掉他们。
一般化的样式：为大部分HTML元素提供。
修复浏览器自身的bug并保证各浏览器的一致性。
优化css可用性：用一些小技巧。
解释代码：用注释和详细的文档来。
element-ui
Element-Ul是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架，手机端有对应框架是Mint UI 。

scss
Sass是成熟、稳定、强大的CSS预处理器，而SCSS是Sass3版本当中引入的新语法特性，完全兼容CSS3的同时继承了Sass强大的动态功能。CSS书写代码规模较大的Web应用时，容易造成选择器、层叠的复杂度过高，因此推荐通过SASS预处理器进行CSS的开发，SASS提供的变量、嵌套、混合、继承等特性，让CSS的书写更加有趣与程式化。

render 函数
Vue 推荐使用在绝大多数情况下使用 template 来创建你的 HTML。然而在一些场景中，你真的需要 JavaScript 的完全编程的能力，这就是 render 函数，它比 template 更接近编译器。
详细的参考https://www.w3cplus.com/vue/vue-render-function.html

render: h => h(App) 是下面内容的缩写：
render: function (createElement) {
return createElement(App);
}
进一步缩写为(ES6 语法)：
render (createElement) {
return createElement(App);
}
再进一步缩写为：
render (h){
return h(App);
}
按照 ES6 箭头函数的写法，就得到了：
render: h => h(App);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
小结：
1. main.js是 vue的入口函数，逻辑很简单，就是导入需要使用库，并挂载到id为app的DOM节点

App.vue
<template>
<div id="app">
<router-view/>
</div>
</template>

router-view
vue-router三大组成之一，是component渲染出口。
vue-router插件三大组件说明如下：

VueRouter ：路由器类，根据路由请求在路由视图中动态渲染选中的组件
router-link ：路由链接组件，声明用以提交路由请求的用户接口
router-view：路由视图组件，负责动态渲染路由选中的组件
详细参考https://my.oschina.net/u/2275217/blog/1607652
export default
es6语法，起导出模块作用
name 属性，组件的全局唯一ID

类型：string
限制：只有作为组件选项时起作用。
详细：
允许组件模板递归地调用自身。注意，组件在全局用 Vue.component() 注册时，全局 ID 自动作为组件的 name。
指定 name 选项的另一个好处是便于调试。有名字的组件有更友好的警告信息。另外，当在有 vue-devtools，未命名组件将显示成，这很没有语义。通过提供 name 选项，可以获得更有语义信息的组件树。
router
import Vue from 'vue'
import Router from 'vue-router'

// in development-env not use lazy-loading, because lazy-loading too many pages will cause webpack hot update too slow. so only in production use lazy-loading;
// detail: https://panjiachen.github.io/vue-element-admin-site/#/lazy-loading

Vue.use(Router)

/* Layout */
import Layout from '../views/layout/Layout'

/**
* hidden: true if `hidden:true` will not show in the sidebar(default is false)
* alwaysShow: true if set true, will always show the root menu, whatever its child routes length
* if not set alwaysShow, only more than one route under the children
* it will becomes nested mode, otherwise not show the root menu
* redirect: noredirect if `redirect:noredirect` will no redirect in the breadcrumb
* name:'router-name' the name is used by <keep-alive> (must set!!!)
* meta : {
title: 'title' the name show in submenu and breadcrumb (recommend set)
icon: 'svg-name' the icon show in the sidebar,
}
**/
export const constantRouterMap = [
{ path: '/login', component: () => import('@/views/login/index'), hidden: true },
{ path: '/404', component: () => import('@/views/404'), hidden: true },

{
path: '/',
component: Layout,
redirect: '/dashboard',
name: 'Dashboard',
hidden: true,
children: [{
path: 'dashboard',
component: () => import('@/views/dashboard/index')
}]
},

{
path: '/example',
component: Layout,
redirect: '/example/table',
name: 'Example',
meta: { title: 'Example', icon: 'example' },
children: [
{
path: 'table',
name: 'Table',
component: () => import('@/views/table/index'),
meta: { title: 'Table', icon: 'table' }
},
{
path: 'tree',
name: 'Tree',
component: () => import('@/views/tree/index'),
meta: { title: 'Tree', icon: 'tree' }
}
]
},

{
path: '/form',
component: Layout,
children: [
{
path: 'index',
name: 'Form',
component: () => import('@/views/form/index'),
meta: { title: 'Form', icon: 'form' }
}
]
},

{
path: '/nested',
component: Layout,
redirect: '/nested/menu1',
name: 'Nested',
meta: {
title: 'Nested',
icon: 'nested'
},
children: [
{
path: 'menu1',
component: () => import('@/views/nested/menu1/index'), // Parent router-view
name: 'Menu1',
meta: { title: 'Menu1' },
children: [
{
path: 'menu1-1',
component: () => import('@/views/nested/menu1/menu1-1'),
name: 'Menu1-1',
meta: { title: 'Menu1-1' }
},
{
path: 'menu1-2',
component: () => import('@/views/nested/menu1/menu1-2'),
name: 'Menu1-2',
meta: { title: 'Menu1-2' },
children: [
{
path: 'menu1-2-1',
component: () => import('@/views/nested/menu1/menu1-2/menu1-2-1'),
name: 'Menu1-2-1',
meta: { title: 'Menu1-2-1' }
},
{
path: 'menu1-2-2',
component: () => import('@/views/nested/menu1/menu1-2/menu1-2-2'),
name: 'Menu1-2-2',
meta: { title: 'Menu1-2-2' }
}
]
},
{
path: 'menu1-3',
component: () => import('@/views/nested/menu1/menu1-3'),
name: 'Menu1-3',
meta: { title: 'Menu1-3' }
}
]
},
{
path: 'menu2',
component: () => import('@/views/nested/menu2/index'),
meta: { title: 'menu2' }
}
]
},

{
path: 'external-link',
component: Layout,
children: [
{
path: 'https://panjiachen.github.io/vue-element-admin-site/#/',
meta: { title: 'External Link', icon: 'link' }
}
]
},

{ path: '*', redirect: '/404', hidden: true }
]

export default new Router({
// mode: 'history', //后端支持可开
scrollBehavior: () => ({ y: 0 }),
routes: constantRouterMap
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
新术语解读：

scrollBehavior
使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 vue-router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。
注意: 这个功能只在支持 history.pushState 的浏览器中可用。
参考https://router.vuejs.org/zh/guide/advanced/scroll-behavior.html#%E5%BC%82%E6%AD%A5%E6%BB%9A%E5%8A%A8

小结：

这个就是整个系统的初始路由了，定义几种典型路由
dashboard，普通页面的路由
nested, 多级路由
external-link，外链
总结
这次就分析学习了一下vue-admin-template项目的入口函数，主要是涵盖了一下vue的基础知识点，主要是路由vue-router的相关知识点，以及渲染函数。
参考
https://www.w3cplus.com/vue/vue-render-function.html
https://my.oschina.net/u/2275217/blog/1607652
https://router.vuejs.org/zh/guide/advanced/scroll-behavior.html#异步滚动
————————————————
版权声明：本文为CSDN博主「seedcup」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/seedcup/article/details/84891225

jamey8383

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
(转载)vue-admin-template笔记（一）

文章目录Vue学习笔记（一）初步印象子模块main.jsApp.vuerouter总结参考Vue学习笔记（一）学习vue-admin-templatehttps://github.com/PanJiaChen/vue-admin-template初步印象src目录如下.├── App.vue├── api├── assets├── components├──...
复制链接

扫一扫