diff --git "a/\351\273\204\345\255\230\346\235\260/2021.6.11.md" "b/\351\273\204\345\255\230\346\235\260/2021.6.11.md"
new file mode 100644
index 0000000000000000000000000000000000000000..b04606d0f818b96ba039ad07b20b445294fab91d
--- /dev/null
+++ "b/\351\273\204\345\255\230\346\235\260/2021.6.11.md"
@@ -0,0 +1,60 @@
+# 2021-6-11 vue cli 安装 加一
+
+##  mkdir 创建文件夹 rm -f 文件名称 删除
+1. 在cmd控制台安装yarn
+```
+ npm i -g yarn
+```
+2. 安装yarn淘宝镜像
+```
+yarn config set registry https://registry.npm.taobao.org/
+```
+3. 安装 vue cli
+```
+npm install -g @vue/cli
+# OR
+yarn global add @vue/cli
+```
+4. 你还可以用这个命令来检查其版本是否正确：
+```
+vue --version
+```
+5. 如需升级全局的 Vue CLI 包，请运行：
+```
+npm update -g @vue/cli
+
+# 或者
+yarn global upgrade --latest @vue/cli
+```
+6. 如果在使用 vue 初始化项目的时候提示：无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称
+```
+表示系统没有找到 vue.cmd 的地址，需要将地址加入到环境变量。
+环境变量：路径 
+path
+C/用户/Adminstor/Appdata/local/yarn/bin
+```
+
+7. vue create 项目名称
+```
+如：选择vue2 yarn  指令进行操作
+```
+8. 在项目内vs code 安装 Vetur
+```
+ 安装激活vetur插件, 代码就有高亮了. 右键菜单还会变多一些, 主要多了个格式化文档.
+ ```
+ 9. Xshell服务器 cd /var/www/      mkdir vue.icu(创建文件名称) 在文件夹里放你的项目
+
+ 10. vim /etc/nginx/conf.d/vue.conf 进入到创建的配置文件 进行编辑
+ ```
+    server{
+        listen 80;
+        server_name vue.icu;
+
+        location / {
+            root /var/www/vue.icu;
+            index index.html;
+        }
+    } 
+```
+## nginx -t 检查  nginx -s reload  重启
+## 之后进入 /C/Windows/System32/drivers/etc/hosts 右键属性 安全点击高级 左下角点击添加 点击选择主体  点击高级 点击立即查找 第二个Administractor 确定 之后全选 除了特殊权限 之后应用确定 在打开hosts 在最下面添加自己的监听路径（网站ping） + 文件名称保存即可 直接访问文件名称 在浏览器上即可显示成功即成功
\ No newline at end of file
diff --git "a/\351\273\204\345\255\230\346\235\260/2021.6.12.md" "b/\351\273\204\345\255\230\346\235\260/2021.6.12.md"
new file mode 100644
index 0000000000000000000000000000000000000000..d227cbd6734bafaa1bb6be8a38220547432e3e43
--- /dev/null
+++ "b/\351\273\204\345\255\230\346\235\260/2021.6.12.md"
@@ -0,0 +1,74 @@
+# 2021-6-12 vue cli  简单的使用
+
+## yarn serve 执行yarn安装下的vue cli 运行
+1. 安装 vue cli 
+2. 生成项目  vue  create 名称
+3. 在components下创建文件 Tese.vue
+
+4. 在 App.vue 下
+```
+<div id="app">
+    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    
+    <test ></test>
+  </div>
+</template>
+
+<script>
+import HelloWorld from './components/HelloWorld.vue'
+import Test from './components/Test.vue'
+
+
+export default {
+  name: 'App',
+  components: {
+    HelloWorld,
+    Test
+  }
+}
+</script>
+```
+5. Text.vue
+```
+<template>
+<div>
+    <h2>{{title}}</h2>
+
+    <table>
+        <th>
+            <td>id</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.price}}</td>
+            <td>{{item.chandi}}</td>
+        </tr>
+    </table>
+    </div>
+</template>
+
+<script>
+    export default{
+        props:{
+            title:{
+                type:String,
+                default:"111111"
+            },
+        },
+        data:function(){
+            return{
+                list:[
+                    {id:1,name:"小米",price:3999,chandi:"北京"},
+                     {id:2,name:"红米",price:3999,chandi:"北京"},
+                      {id:3,name:"华为",price:3999,chandi:"北京"},
+                       {id:4,name:"魅族",price:3999,chandi:"北京"},
+                ]
+            }
+        }
+    }
+</script>
+```
diff --git "a/\351\273\204\345\255\230\346\235\260/2021.6.8.md" "b/\351\273\204\345\255\230\346\235\260/2021.6.8.md"
new file mode 100644
index 0000000000000000000000000000000000000000..3f12256c78be52c6c9361c66813d657e39e3f232
--- /dev/null
+++ "b/\351\273\204\345\255\230\346\235\260/2021.6.8.md"
@@ -0,0 +1,145 @@
+# 2021-6-8 Vue.js  Vue 组件基础
++ Vue.component 全局注册,局部注册
+
+```
+ <div id="app">
+        <com-one></com-one>
+        <com-two></com-two>
+
+        <com-three></com-three>
+        <com-four></com-four>
+    </div>
+
+    <!-- 定义组件 -->
+    <template id="comTwo">
+        <div>
+            <h1>this is com-two</h1>
+        </div>
+    </template>
+    <template id="comFour">
+        <div>
+            <h2>this is com-four</h2>
+        </div>
+    </template>
+
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
+    <script>
+     // 全局注册1: 第二个参数中template的属性值为子组件的具体内容(注册时定义组件)
+        Vue.component('com-one', {
+            template: `<h1>this is com-one</h1>`
+        })
+
+        // 全局注册2: 第二个参数中template的属性值为<template>模板的'#id'
+        // (将子组件的具体内容单独写入<template>中，放到<body>元素之后，<script>元素之前)
+        Vue.component('com-two', {
+            template: '#comTwo',
+        })
+
+        let vm = new Vue({
+            el: '#app',
+            data: {},
+            // 局部注册:(类似于全局注册)
+            components: {
+                "com-three": {
+                    template: `<h2>this is com-three</h2>`
+                },
+                "com-four": {
+                    template: '#comFour'
+                }
+            }
+        })
+    </script>
+```
+## 基本示例 组件的复用
++ data 必须是一个函数
+```
+ <div id="app">
+       //使用组件
+        <button-counter></button-counter>
+         <button-counter></button-counter>
+          <button-counter></button-counter>
+    </div>
+    
+
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
+    <script>
+    //注册组件
+        Vue.component('button-counter',{
+            data:function(){
+                return{
+                    dt:0
+                }
+            },
+            template:`
+            <input type="button" :value="dt" @click="dt++">
+            `
+        })
+        var app=new Vue({
+            el:"#app",
+            data:{
+
+            }
+        })
+    </script>
+```
+## 通过 Prop 向子组件传递数据
+```
+ <div id="app">
+    <blog-post v-for="item in posts" :item="item" :key="item.id"></blog-post>
+    </div>
+    
+
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
+    <script>
+        Vue.component('blog-post',{
+            props:['item'],
+            template:`
+            <div><h1>{{item.title}}</h1></div>
+            `
+        })
+        var app=new Vue({
+            el:"#app",
+            data:{
+                posts:[
+                    {id:1,title:"标题1"},
+                    {id:2,title:"标题2"},
+                    {id:3,title:"标题3"},
+                    {id:4,title:"标题4"}
+                    ]
+            }
+        })
+    </script>
+```
+### 子组件可以通过调用内建的 $emit 方法并传入事件名称来触发一个事件
+
+## 通过插槽分发内容
++ slot 占位
+```
+ <div id="app">
+        <alert-box>
+            Something bad happened.
+        </alert-box>
+    </div>
+
+
+
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
+    <script>
+        Vue.component('alert-box', {
+            template: `
+            <div class="demo-alert-box">
+          <strong>Error!</strong>
+          <slot></slot>
+    </div>
+
+           `
+        })
+        var app = new Vue({
+            el: "#app",
+            data: {
+
+            }
+        })
+    </script>
+```
+
diff --git "a/\351\273\204\345\255\230\346\235\260/2021.6.9.md" "b/\351\273\204\345\255\230\346\235\260/2021.6.9.md"
new file mode 100644
index 0000000000000000000000000000000000000000..41581f94ac00290ebd705a216780290105b4134c
--- /dev/null
+++ "b/\351\273\204\345\255\230\346\235\260/2021.6.9.md"
@@ -0,0 +1,60 @@
+# 2021-6-9 vue cli 安装
+
+##  mkdir 创建文件夹 rm -f 文件名称 删除
+1. 在cmd控制台安装yarn
+```
+ npm i -g yarn
+```
+2. 安装yarn淘宝镜像
+```
+yarn config set registry https://registry.npm.taobao.org/
+```
+3. 安装 vue cli
+```
+npm install -g @vue/cli
+# OR
+yarn global add @vue/cli
+```
+4. 你还可以用这个命令来检查其版本是否正确：
+```
+vue --version
+```
+5. 如需升级全局的 Vue CLI 包，请运行：
+```
+npm update -g @vue/cli
+
+# 或者
+yarn global upgrade --latest @vue/cli
+```
+6. 如果在使用 vue 初始化项目的时候提示：无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称
+```
+表示系统没有找到 vue.cmd 的地址，需要将地址加入到环境变量。
+环境变量：路径 
+path
+C/用户/Adminstor/Appdata/local/yarn/bin
+```
+
+7. vue create 项目名称
+```
+如：选择vue2 yarn  指令进行操作
+```
+8. 在项目内vs code 安装 Vetur
+```
+ 安装激活vetur插件, 代码就有高亮了. 右键菜单还会变多一些, 主要多了个格式化文档.
+ ```
+ 9. Xshell服务器 cd /var/www/      mkdir vue.icu(创建文件名称) 在文件夹里放你的项目
+
+ 10. vim /etc/nginx/conf.d/vue.conf 进入到创建的配置文件 进行编辑
+ ```
+    server{
+        listen 80;
+        server_name vue.icu;
+
+        location / {
+            root /var/www/vue.icu;
+            index index.html;
+        }
+    } 
+```
+## nginx -t 检查  nginx -s reload  重启
+## 之后进入 /C/Windows/System32/drivers/etc/hosts 右键属性 安全点击高级 左下角点击添加 点击选择主体  点击高级 点击立即查找 第二个Administractor 确定 之后全选 除了特殊权限 之后应用确定 在打开hosts 在最下面添加自己的监听路径（网站ping） + 文件名称保存即可 直接访问文件名称 在浏览器上即可显示成功即成功
\ No newline at end of file