修改

44_src_element-ui/App.vue

@@ -0,0 +1,68 @@
+<template>
+  <div>
+    <button>原始样式</button>
+    <input type="text" name="" id="" placeholder="原始样式">
+    <atguigu-row>
+      <el-button>默认按钮</el-button>
+      <el-button type="primary">主要按钮</el-button>
+      <el-button type="success">成功按钮</el-button>
+      <el-button type="info">信息按钮</el-button>
+      <el-button type="warning">警告按钮</el-button>
+      <el-button type="danger">危险按钮</el-button>
+    </atguigu-row>
+
+    <el-date-picker
+      v-model="value2"
+      align="right"
+      type="date"
+      placeholder="选择日期"
+      :picker-options="pickerOptions">
+    </el-date-picker>
+
+    <atguigu-row>
+      <el-button icon="el-icon-search" circle></el-button>
+      <el-button type="primary" icon="el-icon-edit" circle></el-button>
+      <el-button type="success" icon="el-icon-check" circle></el-button>
+      <el-button type="info" icon="el-icon-message" circle></el-button>
+      <el-button type="warning" icon="el-icon-star-off" circle></el-button>
+      <el-button type="danger" icon="el-icon-delete" circle></el-button>
+    </atguigu-row>
+  </div>
+</template>
+
+<script>
+  export default {
+    name:'App',
+    data() {
+      return {
+        pickerOptions: {
+          disabledDate(time) {
+            return time.getTime() > Date.now();
+          },
+          shortcuts: [{
+            text: '今天',
+            onClick(picker) {
+              picker.$emit('pick', new Date());
+            }
+          }, {
+            text: '昨天',
+            onClick(picker) {
+              const date = new Date();
+              date.setTime(date.getTime() - 3600 * 1000 * 24);
+              picker.$emit('pick', date);
+            }
+          }, {
+            text: '一周前',
+            onClick(picker) {
+              const date = new Date();
+              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', date);
+            }
+          }]
+        },
+        value1: '',
+        value2: '',
+      };
+    }
+  } 
+</script>

44_src_element-ui/main.js

@@ -0,0 +1,30 @@
+//引入Vue
+import Vue from 'vue'
+
+//引入app
+import App from './App'
+
+//完整引入
+//引入ElementUI组件库
+// import ElementUI from 'element-ui';
+//引人ElementUI全部样式
+// import 'element-ui/lib/theme-chalk/index.css';
+
+//按需引入
+import { Row,Button,DatePicker } from 'element-ui'
+
+Vue.component('atguigu-row', Row )
+Vue.component(Button.name, Button )
+Vue.component(DatePicker.name, DatePicker )
+
+//关闭vue的生产提示
+Vue.config.productionTip = false
+
+//应用ElementUI
+// Vue.use(ElementUI);
+
+//创建vm
+new Vue({
+    el:'#app',
+    render: h => h(App),
+})

README.md

@@ -964,4 +964,49 @@ this.$router.go() //可前进也可后退
             document.title = 'vue_test'
         }
     })
-   ```
+   ```
+
+4. 独享守卫
+    ```
+    beforeEnter(to,from,next){
+        console.log('beforeEnter',to,from)
+        if(to.meta.isAuth){
+            next()
+        } else {
+            alert('暂无权查看')
+            next({name:'guanyu'})
+        }
+    }
+    ```
+
+5. 组件内路由
+    ```
+    //进入守卫：通过路由规则，进入该组件时被调用
+    beforeRouteEnter(to,from,next){
+    },
+    //离开守卫：通过路由规则，离开该组件时被调用
+    beforeRouteLEave(to,from,next){
+    }
+    ```
+
+### 13.路由器的两种工作模式
+
+1. 对于一个url来说，什么是hash值？————#及其后面的内容就是hash值。
+
+2. hash值不会包含在HTTP请求中，即：hash值不会带给服务器。
+
+3. hash模式：
+
+    1. 地址中永远带着#号，不美观。
+
+    2. 若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。
+
+    3. 兼容性较好。
+
+4. history模式：
+   
+    1. 地址干净，美观。
+
+    2. 兼容性和hash模式相比略差。
+
+    3. 应用部署上线时需要后端人员支持，解决刷新页面服务器端404的问题。

babel.config.js

@@ -1,5 +1,15 @@
 module.exports = {
   presets: [
-    '@vue/cli-plugin-babel/preset'
+    '@vue/cli-plugin-babel/preset',
+    ["@babel/preset-env", { "modules": false }]
+  ],
+  plugins: [
+    [
+      "component",
+      {
+        "libraryName": "element-ui",
+        "styleLibraryName": "theme-chalk"
+      }
+    ]
   ]
 }

package.json

@@ -10,7 +10,9 @@
   "dependencies": {
     "animate.css": "^4.1.1",
     "axios": "^0.24.0",
+    "connect-history-api-fallback": "^1.6.0",
     "core-js": "^3.6.5",
+    "element-ui": "^2.15.6",
     "nanoid": "^3.1.30",
     "pubsub-js": "^1.9.4",
     "vue": "^2.6.11",
@@ -23,6 +25,7 @@
     "@vue/cli-plugin-eslint": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
     "babel-eslint": "^10.1.0",
+    "babel-plugin-component": "^1.1.1",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
     "vue-template-compiler": "^2.6.11"