diff --git "a/\345\210\230\345\215\216\346\243\256/Vue-note-2021-6-11(\351\241\271\347\233\256\351\203\250\347\275\262\345\234\250\346\234\215\345\212\241\345\231\250\347\253\257).md" "b/\345\210\230\345\215\216\346\243\256/Vue-note-2021-6-11(\351\241\271\347\233\256\351\203\250\347\275\262\345\234\250\346\234\215\345\212\241\345\231\250\347\253\257).md"
new file mode 100644
index 0000000000000000000000000000000000000000..04cbef98674c3bbc18c636b4d8e6bca709113f83
--- /dev/null
+++ "b/\345\210\230\345\215\216\346\243\256/Vue-note-2021-6-11(\351\241\271\347\233\256\351\203\250\347\275\262\345\234\250\346\234\215\345\212\241\345\231\250\347\253\257).md"
@@ -0,0 +1,25 @@
+
+### 今天重新叙述了前天的部署的过程，尤其是一些小细节需要注意的地方，在配置好了之后要记得去修改配置，否则网页是不能打开的。
+
+```
+server {
+        listen 80;
+        server_name www.xxxxxx.com;#生产环境
+        location / {
+            root /usr/local/www/xxx_program/;
+            index index.html;
+            try_files $uri $uri/ /index.html;
+        }
+    }
+    server {
+        listen 80;
+        server_name test.xxxxxx.com; #测试环境
+        location / {
+            root /usr/local/www/xxx_program_test/;
+            index index.html;
+            try_files $uri $uri/ /index.html;
+        }
+    }
+
+```
+
diff --git "a/\345\210\230\345\215\216\346\243\256/Vue-note-2021-6-12(\345\215\225\346\226\207\344\273\266\347\273\204\344\273\266\345\214\226).md" "b/\345\210\230\345\215\216\346\243\256/Vue-note-2021-6-12(\345\215\225\346\226\207\344\273\266\347\273\204\344\273\266\345\214\226).md"
new file mode 100644
index 0000000000000000000000000000000000000000..d297f067ad45ca31e6590f5a9476b842e19ec0e9
--- /dev/null
+++ "b/\345\210\230\345\215\216\346\243\256/Vue-note-2021-6-12(\345\215\225\346\226\207\344\273\266\347\273\204\344\273\266\345\214\226).md"
@@ -0,0 +1,115 @@
+### 今天讲了单文件组件化的使用。
+
+1. 单文件组件化也是Vue开发的一个重点内容之一，vue文件，称为单文件组件，是Vue.js 自定义的一种文件格式，一个.vue文件就是一个单独的组件，在文件内封装了相关的代码 ：如 html、css、js等。
+
++ vue 文件也由三部分组成:<template>、<style>、<script>
+
+```
+<template>
+   html
+</template>
+
+<style>
+css
+
+</style>
+
+<script>
+
+js
+
+</script>
+
+
+```
+
+2. vue-loader
+   
++ 浏览器本身并不认为.vue 文件进行加载解析，此时需要vue-loader  
+  
++ 类似的loader 还有很多，如：html-loader、css-loader、style-loader、babel-loader等。
+
++ 需要注意的是vue-loader是基于webpack。
+
++ webpack也是一个打包工具。
+      
+
+```
+<template>
+<div>
+    <h2>{{title}}</h2>
+    <table>
+        <th>
+            <td>序列号:</td>
+            <td>商品</td>
+            <td>品类</td>
+            <td>价格</td>
+            <td>评价</td>
+        </th>
+        <tr v-for="item in list" :key="item.id">
+            <td>{{item.id}}</td>
+            <td>{{item.name}}</td>
+            <td>{{item.category}}</td>
+            <td>{{item.price}}</td>
+            <td>{{item.rate}}</td>
+        </tr>
+        
+    </table>
+</div>
+
+</template>
+
+<script>
+export default {
+    props:{
+        title:{
+            type:String,
+            default:'不懂这是一个标题'
+        }
+    },
+     data:function() {
+return {
+    list:[
+        {
+            id:1,
+            name:'葡萄',
+            category:'水果',
+            price:125,
+            rate:55
+            
+        },
+        {
+            id:2,
+            name:'葡萄',
+            category:'水果',
+            price:125,
+            rate:55
+            
+        },
+        {
+            id:3,
+            name:'葡萄',
+            category:'水果',
+            price:125,
+            rate:55
+            
+        }
+
+    ]
+     };
+}
+}
+</script>
+
+<style scoped>
+tr{
+    color: aqua;
+    font-size: 85px;
+}
+td{
+    margin-left: 110px;
+    display: inline-block;
+}
+</style>
+
+```
\ No newline at end of file
diff --git "a/\345\210\230\345\215\216\346\243\256/Vue-note-2021-6-15(\350\267\257\347\224\261).md" "b/\345\210\230\345\215\216\346\243\256/Vue-note-2021-6-15(\350\267\257\347\224\261).md"
new file mode 100644
index 0000000000000000000000000000000000000000..3cf860658ef1563f7dbb29c96cf8257bc1f60530
--- /dev/null
+++ "b/\345\210\230\345\215\216\346\243\256/Vue-note-2021-6-15(\350\267\257\347\224\261).md"
@@ -0,0 +1,34 @@
+### vue 路由的使用。
+
+### vue add -h (查看目录底下的文件夹)
+
++ yarn add vuex(文件夹) -D （下载到开发模式下的）。
+
+1. 创建组件 
+
++ 首先引入 vue.js 和 vue-router.js;
+
+<script src="js/vue.js"></script>
+
+<script src="js/vue-router.js"></script>
+
+2. 创建Router
+
+var router=new VueRouter()
+或者是使用全局 Vue.use(VueRouter)
+
+3. 映射路由
+
+```
+router.map({
+    '/home':{component:Home},
+    '/about':{component:About}
+})
+
+```
+
+4. 使用 v-link 指令
+
+5. 使用 <router-view>标签
+
+
diff --git "a/\345\210\230\345\215\216\346\243\256/Vue-note-2021-6-16(\345\212\250\346\200\201\350\267\257\347\224\261).md" "b/\345\210\230\345\215\216\346\243\256/Vue-note-2021-6-16(\345\212\250\346\200\201\350\267\257\347\224\261).md"
new file mode 100644
index 0000000000000000000000000000000000000000..e5d2262f55f5b7880695799c394018600202b3bc
--- /dev/null
+++ "b/\345\210\230\345\215\216\346\243\256/Vue-note-2021-6-16(\345\212\250\346\200\201\350\267\257\347\224\261).md"
@@ -0,0 +1,51 @@
+
+### 动态路由的匹配和
+
+#### 路由的使用步骤。
+
+1. 导入Vue和VueRouter，要调用Vue.use(VueRouter)全局使用。
+
++ improt Vue from 'vue
+
++ improt Router from 'vue-router'
+
++ Vue.use(Router)
+
+2. 导入相应的组件
+
+3. 定义路由
+
+```
+const routes = [
+    {path:'/foo',component:Foo},
+    {path:'bar',component:Bar}
+]
+
+```
+
+4. 创建router 实例，传入定义的路径作为参数
+
+```
+const router=new VueRouter({
+    routes   // routes 就相当于我们定义的路由
+})
+
+```
+
+5. 注入路由
+
+```
+const aap = new Vue({
+    router  // 这是我们创建的实例
+})
+
+```
+
+1. 路由器 可以在任意组件中访问
+this.$router
+
+2. ：访问当前路由
+this.$route
+
+3. 这两个属性其实也都是已经放在里面 this(当前组件的data返回对象中)。
+
diff --git "a/\345\210\230\345\215\216\346\243\256/Vue-note-2021-6-18(\350\267\257\347\224\261\347\232\204\347\250\213\345\272\217\345\214\226\345\257\274\350\210\252).md" "b/\345\210\230\345\215\216\346\243\256/Vue-note-2021-6-18(\350\267\257\347\224\261\347\232\204\347\250\213\345\272\217\345\214\226\345\257\274\350\210\252).md"
new file mode 100644
index 0000000000000000000000000000000000000000..c49df643a8d28f4d61611450ee63bc0e84e98a9b
--- /dev/null
+++ "b/\345\210\230\345\215\216\346\243\256/Vue-note-2021-6-18(\350\267\257\347\224\261\347\232\204\347\250\213\345\272\217\345\214\226\345\257\274\350\210\252).md"
@@ -0,0 +1,55 @@
+### 今天讲了路由的程序化导航和命名路线之类的。
+
+#### 三大组件封装UL  1.adminlte  2. Elementui  3. ant vue 4. ant design pro 
+
+1. Web前端的三大主流框架有Angual、React、Vue。
+
++ 三大主流的特点：
+
+一、web前端之Angularjs框架 
+
++ 特别为使用MVC架构模式的单页面web应用而设计，可用于开发动态Web应用程序。
+
+二、web前端之React框架
+
++ React 的主要功能是对DOM操作，及声明式设计，更快开发出Web应用系统。
+
+三、web前端之Vue框架
+
++ Vue是一个开源的框架，能快速开发单页面应用程序。也能作用于Web应用程序框架，能够简化Web开发。小而简洁、功能足够强大。
+
+1. 需要注意的路由的小问题是 route 和 router 的区别
+
++ route : 是显示当前的的实例
+
++ router：而router则是当前运行的状态所在
+
+
+2. 编程式导航
+
+```
+mounted:function(){
+
+     let id=789
+
+    console.log(this.$route);
+    console.log(this.$router);
+    setTimeout(() => {
+    
+
+    // 编程式的导航
+
+      if(this.$route.to!=='/login'){
+          this.$router.push({
+            // 也可以用第二种方法
+            // path:'login',
+            // query:{
+            //   id:4399
+            // } 
+            path:`login/${id}`
+          })
+      }
+    }, 2000);
+  },
+
+```
diff --git "a/\345\210\230\345\215\216\346\243\256/Vue-note-2021-6-19(\345\221\275\344\273\244\350\267\257\347\272\277\345\222\214\350\257\225\345\233\276).md" "b/\345\210\230\345\215\216\346\243\256/Vue-note-2021-6-19(\345\221\275\344\273\244\350\267\257\347\272\277\345\222\214\350\257\225\345\233\276).md"
new file mode 100644
index 0000000000000000000000000000000000000000..8adc7f6cda21fb3fadc00e19f00e27dfa44e4e8c
--- /dev/null
+++ "b/\345\210\230\345\215\216\346\243\256/Vue-note-2021-6-19(\345\221\275\344\273\244\350\267\257\347\272\277\345\222\214\350\257\225\345\233\276).md"
@@ -0,0 +1,36 @@
+
+### 今天讲了命令路线和命令视图
+
+#### 命令视图
+
+1. 所谓的命令视图也就是利用 vue-router中的命令视图。通过语法就可以轻松来实现，当一个路由path匹配后，就可以检查navbar、default、tabbar三个
+
+```
+<router-view name="navabar"></router-view>
+
+<router-view></router-view>
+
+<router-view name="tabbar"></router-view>
+
+```
+
+2. 在上面的一个过程中就需要把 component 改为一个components，这样就可以定义多个路由paht对应n个同级组件
+
+```
+let router = new VueRouter({
+    routes:[
+        {
+   
+         //  键 - 对应视图name 属性值，defalut则是默认的
+         //  值 - 每个试图区需要显示的组件内容，写组件名即可
+            path:'/',
+            components:{
+                navbar:navbar组件名,
+                default:默认组件名,
+                tabbar:tabbar组件名
+            }
+        }
+    ]
+})
+
+```
\ No newline at end of file
diff --git "a/\345\210\230\345\215\216\346\243\256/Vue-note-2021-6-8(\347\273\204\344\273\266\347\232\204\345\237\272\347\241\200).md" "b/\345\210\230\345\215\216\346\243\256/Vue-note-2021-6-8(\347\273\204\344\273\266\347\232\204\345\237\272\347\241\200).md"
new file mode 100644
index 0000000000000000000000000000000000000000..60f918a952bafec85de6ded7883d4a2cd1067990
--- /dev/null
+++ "b/\345\210\230\345\215\216\346\243\256/Vue-note-2021-6-8(\347\273\204\344\273\266\347\232\204\345\237\272\347\241\200).md"
@@ -0,0 +1,51 @@
+
+#### 今天讲了组件的基础，组件也是Vue开发的一个重点内容
+
+1. Vue 组件的两大特性操作 dom。
+
+2. 组件 -- 组件是html、css、js等的一个聚合体。
+
+3. 组件的优点就是能加快项目的进度。
+
+4. 组件有全局创建和局部创建。
+
++ 全局创建
+
+```
+var Hello = Vue.extend({
+    template:'<div> 这里是一个组件 </div>'
+})
+
+Vue.component('Father',Hello)
+
+new Vue({
+    el:'#app',
+})
+
+  //  全局创建的一个简写形式:
+
+  Vue.component('Father',{
+      template:'<div> 这里也是一个组件 </div>'
+  })
+
+
+
+```
+
++ 局部创建
+
+```
+new Vue({
+    el：'#app',
+    components:{
+        'Hello':{       // 组件名
+            template:'#hello'   // 组件的一个结构 
+        }
+    }
+})
+
+```
+
+5. 组件功能也是一大特色，组件也就意味着可以扩展 html 元素，可以封装可重用的代码，可以增加开发效率。同时他也是自定义的。也因为Vue模板就是dom模板，使用的是原生态的解析器进行解析的，这也是限制dom模板发展的一个因素，就需要增加 js 的特性来扩展，从而达到可以限制的html元素使用。
+
+
diff --git "a/\345\210\230\345\215\216\346\243\256/Vue-note-2021-6-9(Vue\345\221\275\344\273\244\350\241\214\345\267\245\345\205\267).md" "b/\345\210\230\345\215\216\346\243\256/Vue-note-2021-6-9(Vue\345\221\275\344\273\244\350\241\214\345\267\245\345\205\267).md"
new file mode 100644
index 0000000000000000000000000000000000000000..88aa21434cd9cb0005049a60e1b22194c4cdc69d
--- /dev/null
+++ "b/\345\210\230\345\215\216\346\243\256/Vue-note-2021-6-9(Vue\345\221\275\344\273\244\350\241\214\345\267\245\345\205\267).md"
@@ -0,0 +1,22 @@
+
+### 今天讲了 Vue快速开发的命令行工具。
+
+1. 看系统有没有yarn的情况下，没有就安装yarn 。 
+
++ npm install -g yarn 
+
+2. 然后切换淘宝源，加快下载的 yarn 的速度。
+
++ yarn config set registry https://registry.npm.taobao.org/
+
+3. 然后就是下载 vue
+
++ 这里使用yarn 来下载  ： yarn global add @vue/cli
+
+4. 然后就是去配置环境变量，否则就不能使用 vue 来执行命令。
+
++ 在系统的环境变量中加入 yarn 的 bin 路径.
+
++ 如：Users\Adminstrator\AppData\Local\Yarn\bin
+
+5. 退出命令模式，重新进入命令模式就可以使用 vue了。
\ No newline at end of file