diff --git "a/\346\270\270\346\265\267\346\236\227/2021-06-08-vue.md" "b/\346\270\270\346\265\267\346\236\227/2021-06-08-vue.md"
new file mode 100644
index 0000000000000000000000000000000000000000..1f3d3ff7a0da27d0700a1b73cab184e3c7f26b39
--- /dev/null
+++ "b/\346\270\270\346\265\267\346\236\227/2021-06-08-vue.md"
@@ -0,0 +1,74 @@
+# 组件基础
+
+
+### 组件的基本用法
+
+组件和创建Vue实例类似，需要先注册后才能使用，Vue组件注册方式分为全局注册和局部注册，全局注册的组件在任何使用Vue的地方均可使用，局部注册的组件只能在实例作用于范围内使用。
+
++ 全局注册：
+```
+Vue.component('my-component', {
+    template : '<div>这是组件中的内容</div>'
+});
+```
+
+ 或者使用局部注册：
+
+```
+var myTemplateContent = {
+   template : '<div>这是组件中的内容</div>'
+};
+
+new Vue({
+   el : '#app',
+   components : {
+      'my-component' : this.myTemplateContent
+   }
+});
+```
+
+使用组件：
+```
+<div id="app">
+   <my-component></my-component>
+</div>
+
+```
+
++  组件自定义标签名使用全小写加-符号的格式（如上例中的my-component）
+
++ 组件template中的DOM结构必须仅被一个元素包围，例如上面的template : '<div>这是组件中的内容</div>'如果写成template : '这是组件中的内容'或者写成template : '<div>这是组件中的内容</div><div>这是组件另一个的内容</div>'会无法渲染或者渲染不全。
++ 自定义的组件标签在有些时候使用会受到限制，例如:如果直接在<table>标签中使用<my-component>标签是无效的，解决方法是使用is属性来挂载组件：
+```
+
+<div id="app">
+    <table>
+        <tbody is='my-component'></tbody>
+    </table>
+</div>
+```
+
+1. 组件是可复用的 Vue 实例，所以它们与 new Vue 接受同样的选项，例如：data, computed, watch, methods 以及生命周期钩子。仅有的例外是 el 这样的根实例特有的选项。
+
+
+
+2. 一个组件的 data 选项必须是一个函数。因此每个实例可以维护一份被返回对象的独立的拷贝。
+```
+// 定义一个名为 button-counter 的新组件
+Vue.component('button-counter', {
+  data: function () {
+    return {
+      count: 0
+    }
+  },
+  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
+})
+```
+3. 为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。这里有两种组件的注册类型：全局注册和局部注册。至此，我们的组件都只是通过 Vue.component 全局注册的：
+```
+Vue.component('my-component-name', {
+  // ... options ...
+})
+```
+通常一个应用会以一棵嵌套的组件树的形式来组织。全局注册的组件可以用在其被注册之后的任何 (通过 new Vue) 新创建的 Vue 根实例，也包括其组件树中的所有子组件的模板中。
+
diff --git "a/\346\270\270\346\265\267\346\236\227/2021-06-09-vue.md" "b/\346\270\270\346\265\267\346\236\227/2021-06-09-vue.md"
new file mode 100644
index 0000000000000000000000000000000000000000..90840b6b506a2fa224e20126b71036de8eea5d84
--- /dev/null
+++ "b/\346\270\270\346\265\267\346\236\227/2021-06-09-vue.md"
@@ -0,0 +1,50 @@
+# vue课堂笔记
+
+
+### 插槽
+
++ 插槽就是子组件中的提供给父组件使用的一个占位符，用`<slot></slot> `表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的`<slot></slot>`标签。
+
++ Vue 实现了一套内容分发的 API，将`<slot>`元素作为承载分发内容的出口，这是vue文档上的说明。具体来说，slot就是可以让你在组件内添加内容的‘空间’。举个例子：
+
+```
+//子组件 ： (假设名为：ebutton)
+<template>
+  <div class= 'button'>
+      <button>  </button>
+  </div>
+</template>
+
+//父组件：（引用子组件 ebutton）
+<template>
+  <div class= 'app'>
+     <ebutton> </ebutton>
+  </div>
+</template>
+```
+
+
++ 具名插槽 （子组件 多个`<slot ></slot> <slot></slot> `对应插入内容）
+有时候，也许子组件内的slot不止一个，那么我们如何在父组件中，精确的在想要的位置，插入对应的内容呢？ 给插槽命一个名即可，即添加name属性。
+```
+//子组件 ： (假设名为：ebutton)
+<template>
+  <div class= 'button'>
+      <button>  </button>
+      <slot name= 'one'> 这就是默认值1</slot>
+      <slot name='two'> 这就是默认值2 </slot>
+      <slot name='three'> 这就是默认值3 </slot>
+  </div>
+</template>
+```
+
+1. 安装cnpm
+```
+npm i -g cnpm --registry=https://registry.npm.taobao.org
+```
+2. 然后就可以cnpm安装依赖包了
+```
+cnpm i -g  vue @vue/cli
+```
+3. cnpm config ls 查看
+
diff --git "a/\346\270\270\346\265\267\346\236\227/2021-06-11-vue.md" "b/\346\270\270\346\265\267\346\236\227/2021-06-11-vue.md"
new file mode 100644
index 0000000000000000000000000000000000000000..fc5f44b63e3d6281f3bb5e478ba075c0f07076ca
--- /dev/null
+++ "b/\346\270\270\346\265\267\346\236\227/2021-06-11-vue.md"
@@ -0,0 +1,33 @@
+# 课堂笔记
+
+安装vue脚手架
+
+第一步
+安装yarn
+```
+npm i -g yarn
+```
+第二步
+
+```
+ npm install -g cnpm --registry=https://registry.npm.taobao.org
+
+ ```
+
+ 第三步
+
+ ```
+yarn global add @vue/cli
+ ```
+
+ 第四步
+
+创建文件夹，然后运行文件
+
+第五步
+
+部署到服务器
+
+
+
+
diff --git "a/\346\270\270\346\265\267\346\236\227/2021-06-12-vue.md" "b/\346\270\270\346\265\267\346\236\227/2021-06-12-vue.md"
new file mode 100644
index 0000000000000000000000000000000000000000..8ca000c3e7ecf92bacb42b0403a2c9a3840e877c
--- /dev/null
+++ "b/\346\270\270\346\265\267\346\236\227/2021-06-12-vue.md"
@@ -0,0 +1,35 @@
+# 单文件组件
+
+在很多Vue项目中，我们使用 Vue.component 来定义全局组件，紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素。
+
+全局定义(Global definitions) 强制要求每个 component 中的命名不得重复
+
+字符串模板(String templates) 缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的 \
+
+不支持CSS(No CSS support) 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏
+
+没有构建步骤(No build step) 限制只能使用 HTML 和 ES5 JavaScript, 而不能使用预处理器，如 Pug (formerly Jade) 和 Babel
+
+
+vue中的单文件组件是以.vue扩展名结尾的文件，在这个文件中封装了html、js、css的代码，它自身是一个独立                                的组件，所以成为单文件组件；
+vue文件结构：
+
+由于.vue封装了html、js、css的代码，所以它由以下几部分组成；
+```
+<template> html </template>
+
+<script> js </script>
+
+<style> css </style>
+
+vue-loader：
+
+```
+
+
+如果使用.vue文件，需要使用指定加载器，否则浏览器是不能解析的。加载.vue文件的加载器是 vue-loader；
+同理，一个项目中还需要html、css等，所以也要用到其对应的加载器 例：html-loader、css-loader…
+vue-loader是基于webpack的，要在webpack中进行配置，所以还要配置webpack；
+webpack：
+
+javaScript应用的静态模块打包器；把前端各种资源作为模块处理、使用、打包；
diff --git "a/\346\270\270\346\265\267\346\236\227/2021-06-15-vue.md" "b/\346\270\270\346\265\267\346\236\227/2021-06-15-vue.md"
new file mode 100644
index 0000000000000000000000000000000000000000..843f5e3c8de6412b289b989bdb67c87e10f4344a
--- /dev/null
+++ "b/\346\270\270\346\265\267\346\236\227/2021-06-15-vue.md"
@@ -0,0 +1,23 @@
+# vue路由
+
+
+1. 定义路由时
+
+名字要用router,否则的话要在new vue({名字：router})
+
+2. 必须要注册路由
+```
+Vue.use(VueRouter)
+```
+
+3. mode
+
++ monde:'history':这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。当你使用 history 模式时，URL 就像正常的 url，例如 http://yoursite.com/user/id
+
+4. vue.config.productiontip = false
+
+设置为 false 以阻止 vue 在启动时生成生产提示。
+
+
+
+
diff --git "a/\346\270\270\346\265\267\346\236\227/2021-06-16-vue.md" "b/\346\270\270\346\265\267\346\236\227/2021-06-16-vue.md"
new file mode 100644
index 0000000000000000000000000000000000000000..737319c63d7c9a09db3e090c6d7899a0756bf65f
--- /dev/null
+++ "b/\346\270\270\346\265\267\346\236\227/2021-06-16-vue.md"
@@ -0,0 +1,79 @@
+# 动态路由和镶嵌路由
+
+### 动态路由
+
+1. 在vue项目中，使用vue-router如果进行不传递参数的路由模式，则称为静态路由；如果能够传递参数，对应的路由数量是不确定的，此时的路由称为动态路由。动态路由，是以冒号为开头的(:)，例子如下：
+```
+export default new Router({
+ routes: [
+  {
+   path: '/',
+   name: 'HelloWorld',
+   component: HelloWorld
+  }, {
+   path: '/RouterComponents/:id',
+   name: 'RouterComponents',
+   component: RouterComponents
+  }
+ ]
+})
+```
+2. 路由跳转，执行方式有两大类；
+第一大类：router-link模式，直接把参数写在to属性里面：
+```
+<router-link :to="{name:'RouterComponents',params:{id:110}}">跳转</router-link>
+```
+第二大类：$router.push()模式，代码如下：
+
+```
+methods: {
+  changeFuc (val) {
+   this.$router.push({
+    name: 'RouterComponents',
+    params: {id: val}
+   })
+  }
+}
+```
+或者：
+```
+methods: {
+  changeFuc (val) {
+   this.$router.push({
+    path: `/RouterComponents/${val}`,
+   })
+  }
+}
+
+```
+
+### 嵌套路由
+
+vue项目中，界面通常由多个嵌套的组件构成；同理，URL中的动态路由也可以按照某种结构对应嵌套的各层组件：
+```
+export default new Router({
+ routes: [
+  {
+   path: '/', // 根路由
+   name: 'HelloWorld',
+   component: HelloWorld
+  }, {
+   path: '/RouterComponents/:id',
+   component: RouterComponents,
+   children: [
+    {
+     path: '', // 默认路由
+     name: 'ComponentA', // 当匹配上RouterComponents后，默认展示在<router-view>中
+     component: ComponentA
+    },
+    {
+     path: '/ComponentB',
+     name: 'ComponentB',
+     component: ComponentB
+    },
+   ]
+  }
+ ]
+})
+
+```
\ No newline at end of file
diff --git "a/\346\270\270\346\265\267\346\236\227/2021-06-18-vue.md" "b/\346\270\270\346\265\267\346\236\227/2021-06-18-vue.md"
new file mode 100644
index 0000000000000000000000000000000000000000..82186b9878332f66ed91c770a9815c31471d40a8
--- /dev/null
+++ "b/\346\270\270\346\265\267\346\236\227/2021-06-18-vue.md"
@@ -0,0 +1,51 @@
+# vue编程式的导航
+
+
+
+```
+
+除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。
+
+router.push(location)
+
+    想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。
+
+    当你点击 <router-link> 时，这个方法会在内部调用，所以说，点击 <router-link :to="..."> 等同于调用 router.push(...)。
+
+    该方法的参数可以是一个字符串路径，或者一个描述地址的对象。例如：
+
+
+    // 字符串
+    router.push('home')
+
+    // 对象
+    router.push({ path: 'home' })
+
+    // 命名的路由
+    router.push({ name: 'user', params: { userId: 123 }})
+
+    // 带查询参数，变成 /register?plan=private
+    router.push({ path: 'register', query: { plan: 'private' }})
+
+router.replace(location)
+    跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。
+    
+router.go(n)
+    这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)。
+
+
+    // 在浏览器记录中前进一步，等同于 history.forward()
+    router.go(1)
+
+    // 后退一步记录，等同于 history.back()
+    router.go(-1)
+
+    // 前进 3 步记录
+    router.go(3)
+
+    // 如果 history 记录不够用，那就默默地失败呗
+    router.go(-100)
+    router.go(100)
+
+
+    ```
diff --git "a/\346\270\270\346\265\267\346\236\227/2021-06-19-vue.md" "b/\346\270\270\346\265\267\346\236\227/2021-06-19-vue.md"
new file mode 100644
index 0000000000000000000000000000000000000000..7bae246a3cc33f7d9b63e86eebe7adcc822b40f1
--- /dev/null
+++ "b/\346\270\270\346\265\267\346\236\227/2021-06-19-vue.md"
@@ -0,0 +1,31 @@
+# 路由
+
+### 命名路由
+
+命名路由就是在routers配置路由名称的时候给路由定义不同的名字，这样的好处就是可以在使用router-link的to属性跳转路由的时候传一个对象从而实现与router.push一样的效果：
+```
+<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
+```
+等同于
+```
+router.push({ name: 'user', params: { userId: 123 }})
+```
+
+### 命名视图
+
+1. 有时候想同时（同级）展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar（侧导航） 和 main（主内容） 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default。
+
+```
+<router-view class="view one"></router-view> 
+<router-view class="view two" name="a"></router-view> 
+<router-view class="view three" name="b"></router-view> 
+const router = new VueRouter({ 
+  routes: [ 
+    { 
+      path: '/', 
+      components: { default: Foo, a: Bar, b: Baz } 
+    } 
+  ] 
+})
+```
+
diff --git "a/\346\270\270\346\265\267\346\236\227/2021-06-22-vue.md" "b/\346\270\270\346\265\267\346\236\227/2021-06-22-vue.md"
new file mode 100644
index 0000000000000000000000000000000000000000..94d64907e1cdbe754cb6dda07d28da189b5e1625
--- /dev/null
+++ "b/\346\270\270\346\265\267\346\236\227/2021-06-22-vue.md"
@@ -0,0 +1,57 @@
+# web api创建项目
+
+1. 创建.net core解决方案
+```
+//名称Dream
+ dotnet new sln -o Dream
+```
+
+2. 进入解决方案
+
+```
+cd Dream
+
+查看文件
+ls
+
+```
+3. 创建webApi项目
+```
+//webapi表示创建项目时选择模板的类型
+//--no-https表示不启用https
+dotnet new webapi --no-https -o Dream.WebApi
+```
+
+4. 创建类库项目
+```
+//Dream.Entity和Dream.Service是类库名称
+//classlib表示类库模板
+ dotnet new classlib -o Dream.Entity
+ dotnet new classlib -o Dream.Service
+```
+
+5. 将项目添加至解决方案
+```
+ dotnet sln Dream.sln add Dream.WebApi/Dream.WebApi.csproj Dream.Entity/Dream.Entity.csproj Dream.Service/Dream.Service.csproj 
+```
+
+6. 目前项目基本创建好，但是我们实际当中还涉及到项目之间的引用，这里我们的 “Dream.Service”项目需要引用“Dream.Entity”项目，“Dream.WebApi”项目需要引用“Dream.Entity”和“ Dream.Entity ”两个项目，我们接着继续进行项目之间的引用操作，命令如下，命令当中“ reference ”参数就是起引用作用
+```
+
+> dotnet add Dream.Service/Dream.Service.csproj reference Dream.Entity/Dream.Entity.csproj
+> dotnet add Dream.WebApi/Dream.WebApi.csproj reference Dream.Service/Dream.Service.csproj Dream.Entity/Dream.Entity.csproj
+
+```
+
+7. 引用NuGet软件包到项目中
+```
+//package参数是引用NuGet包的作用
+ dotnet add Dream.WebApi/Dream.WebApi.csproj package Newtonsoft.Json
+```
+
+8. 运行项目
+
+```
+//-p是指要运行的项目
+ dotnet run -p Dream.WebApi/Dream.WebApi.csproj
+```
\ No newline at end of file
diff --git "a/\346\270\270\346\265\267\346\236\227/cnpm\347\232\204\344\275\277\347\224\250\345\235\217\345\244\204.md" "b/\346\270\270\346\265\267\346\236\227/cnpm\347\232\204\344\275\277\347\224\250\345\235\217\345\244\204.md"
new file mode 100644
index 0000000000000000000000000000000000000000..4ebf6cce5dbabe32a588d1c8593cbd98c0a256c4
--- /dev/null
+++ "b/\346\270\270\346\265\267\346\236\227/cnpm\347\232\204\344\275\277\347\224\250\345\235\217\345\244\204.md"
@@ -0,0 +1,11 @@
+相信你们看到很多前端工程项目都存在一个 package-lock.json 的文件。就是跟它有关系。（关于 package-lock.json 的作用可以看这篇文章。）
+```
+cnpm i不受 package-lock.json 影响，只会根据 package.json 进行下载安装。
+cnpm i xxx@xxx不会跟新到 package-lock.json 中去。
+npm i xxx@xxx 会跟新到 package-lock.json 中去。
+在多人共同协作维护的项目中，package-lock.json 是必不可少的，是为了确保不同开发者安装的包及其依赖保持一致，同时也是降低不同版本 npm 包给项目稳定性带来的影响。（尤其是一些不遵循语义化版本控制的第三方 npm 包，就很容易被坑到。）
+
+```
+
+
+