diff --git "a/\346\235\216\347\220\263/2021-06-08.md" "b/\346\235\216\347\220\263/2021-06-08.md"
new file mode 100644
index 0000000000000000000000000000000000000000..a5749f2323745365125710e25ca31ba99a354bc9
--- /dev/null
+++ "b/\346\235\216\347\220\263/2021-06-08.md"
@@ -0,0 +1,80 @@
+# Vue
+
+## 组件基础
+
+```
+<div id='Sakura'>
+        //引用组件名称
+        <btn-count></btn-count>
+        <btn-count></btn-count>
+        <btn-count></btn-count>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.13/dist/vue.js"></script>
+
+    <script>
+        Vue.component('btn-count',{ //添加组件
+            data:function(){
+                return{
+                    count:0
+                }
+            },
+            template:`
+                <input type="button" :value="count" @click="count++">
+            `//使用template包裹元素(模板占位符),不会被渲染到页面上
+        })
+
+        let Sakura = new Vue({
+            el:'#Sakura',
+            data:{
+
+            }
+        })
+    </script>
+```
+![avatar](./imgs/45.PNG)
+
++ 一个组件的data必须是一个函数
+```
+ data：function(){
+     return {
+         count:0
+     }
+ } 
+```
+## Prop
+```
+<div id='Sakura'>
+        <blog-post title="组件基础"></blog-post>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
+
+    <script>
+        Vue.component('btn-count',{
+            data:function(){
+            return{
+                count:0
+            }
+        },
+        template:`
+        <input type="button" :value="count" @click="count++"></input>
+        `
+        })
+
+        Vue.component('blog-post',{
+            props:['title','author'],
+            template:`
+            <div>
+                <h1>{{title}}</div>
+                <p>{{author}}<p>
+            `
+        })
+        let app = new Vue({
+            el:'#Sakura',
+            data:{
+                
+            }
+        })
+    </script>
+```
\ No newline at end of file
diff --git "a/\346\235\216\347\220\263/2021-06-09.md" "b/\346\235\216\347\220\263/2021-06-09.md"
new file mode 100644
index 0000000000000000000000000000000000000000..89daa7c602e5949c800a53551ddf24e9afc7f85f
--- /dev/null
+++ "b/\346\235\216\347\220\263/2021-06-09.md"
@@ -0,0 +1,96 @@
+# Vue CLI
+
+## 步骤
++ 第一步：使用 Windows PowerShell。
+
++ 第二步：安装yarn,命令：npm i -g yarn
+
+![avatar](./imgs/46.PNG)
+
++ 第三步：配置环境变量,点击电脑-属性-高级系统设置-环境变量。配置如下图：
+
+![avatar](./imgs/47.PNG)
++ 第四步：安装,命令：yarn global add @vue/cli
+
++ 第五步：检查是否安装成功,记得先退出再重新打开输入vue。
+
+![avatar](./imgs/48.PNG)
+
++ 第六步：建文件夹
+
+![avatar](./imgs/49.PNG)
+
+![avatar](./imgs/50.PNG)
+
+![avatar](./imgs/51.PNG)
+
+ps:注意出现success才是成功。
+
+![avatar](./imgs/52.PNG)
+
+![avatar](./imgs/53.PNG)
+
+![avatar](./imgs/54.PNG)
+
++ 打开我们的项目文件 mypro- my-vue-app - components - HelloWorld.vue 点击Install。
+
+![avatar](./imgs/55.PNG)
+
++ 打开终端 输入：git status 
++ yarn lint
++ yarn build
+
++ 打开Xshell
++ 连接IP地址
++ su 进入管理员
++ cd /var/www
++ ll
++ 创建文件 mkdir azhana.icu
++ cd azhana.icu/
++ ll .a .
++ cd ..
++ ll -l
++ chmod -R 777 azhana.icu/
++ vim /etc/nginx/conf.d/azhan.icu.conf 
++ 将my-vue-app的dist文件内的东西放进azhana.icu
+```
+server {
+    listen 80;
+    server_name azhana.icu
+
+    location / {
+        root /var/www/azhana.icu;
+        index index.html;
+    }
+}
+
+:wq!
+```
+有待更新
+
+## 插槽
+```
+    <div id='Sakura'>
+       <x-txt>烤肉</x-txt>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
+
+    <script>
+    Vue.component('x-txt',{
+        template:`
+        <h1>
+            <slot></slot>
+        </h1>
+        `
+    })
+
+    let Sakura = new Vue({
+        el:'#Sakura',
+        data:{
+
+        }
+    })
+    </script>
+```
+![avatar](./imgs/56.PNG)
\ No newline at end of file
diff --git "a/\346\235\216\347\220\263/2021-06-10.md" "b/\346\235\216\347\220\263/2021-06-10.md"
new file mode 100644
index 0000000000000000000000000000000000000000..f636dd2a4ae70d6a2a8aa6be0ee0ff3529cbb696
--- /dev/null
+++ "b/\346\235\216\347\220\263/2021-06-10.md"
@@ -0,0 +1,16 @@
+# Vue CLI
+
++ su 进入超级管理员
+
++ 进入淘宝镜像： npm config set registey https://registey.npm.taobao.org
+
++ 更新：apt -y update
+
++ 安装：apt -y install nodejs
+![avatar](./imgs/57.PNG)
+
++ npm i -g yarn
+
++ yarn global add @vue/cli
+
++ 
\ No newline at end of file
diff --git "a/\346\235\216\347\220\263/2021-06-12.md" "b/\346\235\216\347\220\263/2021-06-12.md"
new file mode 100644
index 0000000000000000000000000000000000000000..08865ab4059608e3c176f9f32d7aa658f61dabfe
--- /dev/null
+++ "b/\346\235\216\347\220\263/2021-06-12.md"
@@ -0,0 +1,11 @@
+# 单文件组件
+
++ 强制要求每个component(组件)名称不重复。 
+
++ 文件以 `.vue` 结尾的就是单文件组件。
+
++ 一般浏览器不能识别`.vue`文件，所以需要vue-loader来加载`.vue`文件，所以需要基于webpack来开发。
+
++ webpack把一切都当成模块。 
+
++ App.vue是主组件。
\ No newline at end of file
diff --git "a/\346\235\216\347\220\263/index.html" "b/\346\235\216\347\220\263/html/index.html"
similarity index 100%
rename from "\346\235\216\347\220\263/index.html"
rename to "\346\235\216\347\220\263/html/index.html"
diff --git "a/\346\235\216\347\220\263/index1.html" "b/\346\235\216\347\220\263/html/index1.html"
similarity index 100%
rename from "\346\235\216\347\220\263/index1.html"
rename to "\346\235\216\347\220\263/html/index1.html"
diff --git "a/\346\235\216\347\220\263/html/\347\273\204\344\273\266.html" "b/\346\235\216\347\220\263/html/\347\273\204\344\273\266.html"
new file mode 100644
index 0000000000000000000000000000000000000000..614e257f24c80a64b9244a4976b7d19a5b21f173
--- /dev/null
+++ "b/\346\235\216\347\220\263/html/\347\273\204\344\273\266.html"
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>组件</title>
+</head>
+<body>
+    <div id='Sakura'>
+        <!-- 引用组件名称 
+        <btn-count></btn-count>
+        <btn-count></btn-count>
+        <btn-count></btn-count>
+         -->
+        <blog-post title="马上就可以吃午饭了，开心！"></blog-post>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.13/dist/vue.js"></script>
+
+    <script>
+        Vue.component('btn-count',{ //添加一个组件
+            data:function(){
+                return{
+                    count:0
+                }
+            },
+            template:`
+                <input type="button" :value="count" @click="count++">
+            `//使用template包裹元素
+        })
+
+        Vue.component('blog-post',{
+            props:['title'],
+            template:`<h1>{{title}}</h1>`
+        })
+
+        let Sakura = new Vue({
+            el:'#Sakura',
+            data:{
+
+            }
+        })
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\346\235\216\347\220\263/imgs/45.PNG" "b/\346\235\216\347\220\263/imgs/45.PNG"
new file mode 100644
index 0000000000000000000000000000000000000000..9f71e3c783b7da6b179647e166dc718597eb5db5
Binary files /dev/null and "b/\346\235\216\347\220\263/imgs/45.PNG" differ
diff --git "a/\346\235\216\347\220\263/imgs/46.PNG" "b/\346\235\216\347\220\263/imgs/46.PNG"
new file mode 100644
index 0000000000000000000000000000000000000000..11c4e64b4c2862793bb719e301dc31eaf50bc2c8
Binary files /dev/null and "b/\346\235\216\347\220\263/imgs/46.PNG" differ
diff --git "a/\346\235\216\347\220\263/imgs/47.PNG" "b/\346\235\216\347\220\263/imgs/47.PNG"
new file mode 100644
index 0000000000000000000000000000000000000000..7daf106f3495cd5a65e42f151412cdb8fce7acc4
Binary files /dev/null and "b/\346\235\216\347\220\263/imgs/47.PNG" differ
diff --git "a/\346\235\216\347\220\263/imgs/48.PNG" "b/\346\235\216\347\220\263/imgs/48.PNG"
new file mode 100644
index 0000000000000000000000000000000000000000..60255d7280cbe3a77fb81e53b0bae221ad862681
Binary files /dev/null and "b/\346\235\216\347\220\263/imgs/48.PNG" differ
diff --git "a/\346\235\216\347\220\263/imgs/49.PNG" "b/\346\235\216\347\220\263/imgs/49.PNG"
new file mode 100644
index 0000000000000000000000000000000000000000..5a576c60184c023581b72f19725e5f25f080ab22
Binary files /dev/null and "b/\346\235\216\347\220\263/imgs/49.PNG" differ
diff --git "a/\346\235\216\347\220\263/imgs/50.PNG" "b/\346\235\216\347\220\263/imgs/50.PNG"
new file mode 100644
index 0000000000000000000000000000000000000000..253717c8928454b4ac2cd8ff39542fd62f9daa43
Binary files /dev/null and "b/\346\235\216\347\220\263/imgs/50.PNG" differ
diff --git "a/\346\235\216\347\220\263/imgs/51.PNG" "b/\346\235\216\347\220\263/imgs/51.PNG"
new file mode 100644
index 0000000000000000000000000000000000000000..71cc2a5f8db9a26eeec442b223e8b90dc7c92e9e
Binary files /dev/null and "b/\346\235\216\347\220\263/imgs/51.PNG" differ
diff --git "a/\346\235\216\347\220\263/imgs/52.PNG" "b/\346\235\216\347\220\263/imgs/52.PNG"
new file mode 100644
index 0000000000000000000000000000000000000000..c50447a31273a7af018f8bd0ef2f4f2de52e5765
Binary files /dev/null and "b/\346\235\216\347\220\263/imgs/52.PNG" differ
diff --git "a/\346\235\216\347\220\263/imgs/53.PNG" "b/\346\235\216\347\220\263/imgs/53.PNG"
new file mode 100644
index 0000000000000000000000000000000000000000..e4f5f4a891b86af3035993b541fdbad225d08b79
Binary files /dev/null and "b/\346\235\216\347\220\263/imgs/53.PNG" differ
diff --git "a/\346\235\216\347\220\263/imgs/54.PNG" "b/\346\235\216\347\220\263/imgs/54.PNG"
new file mode 100644
index 0000000000000000000000000000000000000000..4c5e990054c96de006a5630769275649e0cab1ea
Binary files /dev/null and "b/\346\235\216\347\220\263/imgs/54.PNG" differ
diff --git "a/\346\235\216\347\220\263/imgs/55.PNG" "b/\346\235\216\347\220\263/imgs/55.PNG"
new file mode 100644
index 0000000000000000000000000000000000000000..220d7ea5672b097eb2198188bbff12143bd137d8
Binary files /dev/null and "b/\346\235\216\347\220\263/imgs/55.PNG" differ
diff --git "a/\346\235\216\347\220\263/imgs/56.PNG" "b/\346\235\216\347\220\263/imgs/56.PNG"
new file mode 100644
index 0000000000000000000000000000000000000000..1d92c737a0edad937e26ecd8a32cdbd956b06232
Binary files /dev/null and "b/\346\235\216\347\220\263/imgs/56.PNG" differ
diff --git "a/\346\235\216\347\220\263/imgs/57.PNG" "b/\346\235\216\347\220\263/imgs/57.PNG"
new file mode 100644
index 0000000000000000000000000000000000000000..82b0b48d3c947159f0a396f89055113da65654a3
Binary files /dev/null and "b/\346\235\216\347\220\263/imgs/57.PNG" differ
diff --git "a/\346\235\216\347\220\263/imgs/58.PNG" "b/\346\235\216\347\220\263/imgs/58.PNG"
new file mode 100644
index 0000000000000000000000000000000000000000..9c0e9d0e5b1ea04805c5d21a1f433a7e02ca7edc
Binary files /dev/null and "b/\346\235\216\347\220\263/imgs/58.PNG" differ