Skip to content

Commit 298890d

Browse files
xingwei07xingwei07
committed
修改
1 parent 0bde579 commit 298890d

24 files changed

+328
-740
lines changed

‎44_src_element-ui/App.vue

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<template>
2+
<div>
3+
<button>原始样式</button>
4+
<input type="text" name="" id="" placeholder="原始样式">
5+
<atguigu-row>
6+
<el-button>默认按钮</el-button>
7+
<el-button type="primary">主要按钮</el-button>
8+
<el-button type="success">成功按钮</el-button>
9+
<el-button type="info">信息按钮</el-button>
10+
<el-button type="warning">警告按钮</el-button>
11+
<el-button type="danger">危险按钮</el-button>
12+
</atguigu-row>
13+
14+
<el-date-picker
15+
v-model="value2"
16+
align="right"
17+
type="date"
18+
placeholder="选择日期"
19+
:picker-options="pickerOptions">
20+
</el-date-picker>
21+
22+
<atguigu-row>
23+
<el-button icon="el-icon-search" circle></el-button>
24+
<el-button type="primary" icon="el-icon-edit" circle></el-button>
25+
<el-button type="success" icon="el-icon-check" circle></el-button>
26+
<el-button type="info" icon="el-icon-message" circle></el-button>
27+
<el-button type="warning" icon="el-icon-star-off" circle></el-button>
28+
<el-button type="danger" icon="el-icon-delete" circle></el-button>
29+
</atguigu-row>
30+
</div>
31+
</template>
32+
33+
<script>
34+
export default {
35+
name:'App',
36+
data() {
37+
return {
38+
pickerOptions: {
39+
disabledDate(time) {
40+
return time.getTime() > Date.now();
41+
},
42+
shortcuts: [{
43+
text: '今天',
44+
onClick(picker) {
45+
picker.$emit('pick', new Date());
46+
}
47+
}, {
48+
text: '昨天',
49+
onClick(picker) {
50+
const date = new Date();
51+
date.setTime(date.getTime() - 3600 * 1000 * 24);
52+
picker.$emit('pick', date);
53+
}
54+
}, {
55+
text: '一周前',
56+
onClick(picker) {
57+
const date = new Date();
58+
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
59+
picker.$emit('pick', date);
60+
}
61+
}]
62+
},
63+
value1: '',
64+
value2: '',
65+
};
66+
}
67+
}
68+
</script>

‎44_src_element-ui/main.js

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
//引入Vue
2+
import Vue from 'vue'
3+
4+
//引入app
5+
import App from './App'
6+
7+
//完整引入
8+
//引入ElementUI组件库
9+
// import ElementUI from 'element-ui';
10+
//引人ElementUI全部样式
11+
// import 'element-ui/lib/theme-chalk/index.css';
12+
13+
//按需引入
14+
import { Row,Button,DatePicker } from 'element-ui'
15+
16+
Vue.component('atguigu-row', Row )
17+
Vue.component(Button.name, Button )
18+
Vue.component(DatePicker.name, DatePicker )
19+
20+
//关闭vue的生产提示
21+
Vue.config.productionTip = false
22+
23+
//应用ElementUI
24+
// Vue.use(ElementUI);
25+
26+
//创建vm
27+
new Vue({
28+
el:'#app',
29+
render: h => h(App),
30+
})

‎README.md

Lines changed: 46 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -964,4 +964,49 @@ this.$router.go() //可前进也可后退
964964
document.title = 'vue_test'
965965
}
966966
})
967-
```
967+
```
968+
969+
4. 独享守卫
970+
```
971+
beforeEnter(to,from,next){
972+
console.log('beforeEnter',to,from)
973+
if(to.meta.isAuth){
974+
next()
975+
} else {
976+
alert('暂无权查看')
977+
next({name:'guanyu'})
978+
}
979+
}
980+
```
981+
982+
5. 组件内路由
983+
```
984+
//进入守卫：通过路由规则，进入该组件时被调用
985+
beforeRouteEnter(to,from,next){
986+
},
987+
//离开守卫：通过路由规则，离开该组件时被调用
988+
beforeRouteLEave(to,from,next){
989+
}
990+
```
991+
992+
### 13.路由器的两种工作模式
993+
994+
1. 对于一个url来说，什么是hash值？————#及其后面的内容就是hash值。
995+
996+
2. hash值不会包含在HTTP请求中，即：hash值不会带给服务器。
997+
998+
3. hash模式：
999+
1000+
1. 地址中永远带着#号，不美观。
1001+
1002+
2. 若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。
1003+
1004+
3. 兼容性较好。
1005+
1006+
4. history模式：
1007+
1008+
1. 地址干净，美观。
1009+
1010+
2. 兼容性和hash模式相比略差。
1011+
1012+
3. 应用部署上线时需要后端人员支持，解决刷新页面服务器端404的问题。

‎babel.config.js

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,15 @@
11
module.exports = {
22
presets: [
3-
'@vue/cli-plugin-babel/preset'
3+
'@vue/cli-plugin-babel/preset',
4+
["@babel/preset-env", { "modules": false }]
5+
],
6+
plugins: [
7+
[
8+
"component",
9+
{
10+
"libraryName": "element-ui",
11+
"styleLibraryName": "theme-chalk"
12+
}
13+
]
414
]
515
}

‎package-lock.json

Lines changed: 96 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,9 @@
1010
"dependencies": {
1111
"animate.css": "^4.1.1",
1212
"axios": "^0.24.0",
13+
"connect-history-api-fallback": "^1.6.0",
1314
"core-js": "^3.6.5",
15+
"element-ui": "^2.15.6",
1416
"nanoid": "^3.1.30",
1517
"pubsub-js": "^1.9.4",
1618
"vue": "^2.6.11",
@@ -23,6 +25,7 @@
2325
"@vue/cli-plugin-eslint": "~4.5.0",
2426
"@vue/cli-service": "~4.5.0",
2527
"babel-eslint": "^10.1.0",
28+
"babel-plugin-component": "^1.1.1",
2629
"eslint": "^6.7.2",
2730
"eslint-plugin-vue": "^6.2.2",
2831
"vue-template-compiler": "^2.6.11"

‎src copy/App.vue

Lines changed: 0 additions & 38 deletions
This file was deleted.

0 commit comments

Comments
 (0)