diff --git "a/\351\273\204\345\256\207\347\205\214/6.11 Vue CLI\351\203\250\347\275\262\345\234\250\346\234\215\345\212\241\345\231\250.md" "b/\351\273\204\345\256\207\347\205\214/6.11 Vue CLI\351\203\250\347\275\262\345\234\250\346\234\215\345\212\241\345\231\250.md"
new file mode 100644
index 0000000000000000000000000000000000000000..c373557fea58d6e3d4b1b7b389a4159e8b0a65e3
--- /dev/null
+++ "b/\351\273\204\345\256\207\347\205\214/6.11 Vue CLI\351\203\250\347\275\262\345\234\250\346\234\215\345\212\241\345\231\250.md"	
@@ -0,0 +1,58 @@
+# Vue CLI 部署在服务器
+
+## 端口修改配置文件
+
+```
+module.exports = {
+    devServer: {
+        port: 5050,     // 端口
+    },
+    lintOnSave: false   // 取消 eslint 验证
+};
+```
+
+## 一些Vue命令
+
+安装vue/cli
+```
+npm install -g @vue/cli
+
+# OR
+yarn global add @vue/cli
+```
+
+更新vue/cli
+
+```
+npm update -g @vue/cli
+
+# OR
+yarn global upgrade --latest @vue/cli
+```
+
+创建vue项目
+
+```
+vue create myVueProject  // 你的要创建Vue项目
+
+cd myVueProject // 进入你的项目文件夹
+
+yarn serve // 启动你的vue项目
+
+yarn build // 打包你的项目，文件会保存到dist文件夹里面
+
+cp -r 文件名 /位置/修改后的文件名  // 移动项目文件
+```
+
+## 修改Vue文件执行端口号
+
+在 package.json 同级文件夹下，创建一个名为 vue.config.js 的文件配置如下：
+
+```
+module.exports = {
+    devServer: {
+        port: 5050,     // 端口
+    },
+    lintOnSave: false   // 取消 eslint 验证
+};
+```
\ No newline at end of file
diff --git "a/\351\273\204\345\256\207\347\205\214/6.12 Vue CLI\351\241\271\347\233\256\344\275\277\347\224\250\347\273\204\344\273\266.md" "b/\351\273\204\345\256\207\347\205\214/6.12 Vue CLI\351\241\271\347\233\256\344\275\277\347\224\250\347\273\204\344\273\266.md"
new file mode 100644
index 0000000000000000000000000000000000000000..41694562fdb89e04eb6da5814f8c65979070006e
--- /dev/null
+++ "b/\351\273\204\345\256\207\347\205\214/6.12 Vue CLI\351\241\271\347\233\256\344\275\277\347\224\250\347\273\204\344\273\266.md"	
@@ -0,0 +1,43 @@
+# Vue CLI 项目使用组件
+
+1. 完成VueCLI项目部署。
+2. 在components里新建你需要引入的vue文件。
+    ```
+    export default {
+        data: function () {
+            return {
+                // 返回内容
+            }
+        }
+    }
+    ```
+    注意：data返回的必须是一个函数。
+
+3. 在src里你的App.vue里引入你要引入的vue文件。
+    ```
+    // 引入组件
+    import HelloWorld from './components/HelloWorld.vue'
+    import ATest from './components/ATest.vue'
+    import ATest from './components/Test.vue'
+
+    // 注册组件
+    export default {
+    name: 'App',
+    components: {
+        HelloWorld,
+        ATest,
+        Test
+    }
+    }
+    ```
+
+    注意：在template中使用标签命名规则，以上面注册的组件为例:
+
+    ```
+    // 如注册的组件名为ATest,则标签名如下：
+    <a-test></a-test>
+
+    // 如注册的组件名为Test,则标签名如下：
+    <test></test>
+    ```
+    像上面那种连续两个字母大写的情况在标签中使用时候用 - 连接两个字母。
diff --git "a/\351\273\204\345\256\207\347\205\214/6.8 Vue\347\273\204\344\273\266\345\237\272\347\241\200.md" "b/\351\273\204\345\256\207\347\205\214/6.8 Vue\347\273\204\344\273\266\345\237\272\347\241\200.md"
new file mode 100644
index 0000000000000000000000000000000000000000..ffee22a5c7b60aabcb2e00288680fa57c348d687
--- /dev/null
+++ "b/\351\273\204\345\256\207\347\205\214/6.8 Vue\347\273\204\344\273\266\345\237\272\347\241\200.md"	
@@ -0,0 +1,121 @@
+# 组件基础
+
+## 基本示例
+
+组件可以进行任意次数的复用。
+
+```
+<!-- 前端代码 -->
+<div id="app">
+    <btn-add></btn-add>
+    <btn-add></btn-add>
+    <btn-add></btn-add>
+</div>
+```
+
+一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝。
+
+```
+// 后端代码
+Vue.component("btn-add",{
+    data:function(){
+        return{
+            count:0
+        }
+    },
+    template:`
+        <button v-on:click="count++">第{{count}}次点击</button>
+    `
+})
+
+let app = new Vue({
+    el:"#app",
+    
+})
+```
+
+注意当点击按钮时，每个组件都会各自独立维护它的 count。因为你每用一次组件，就会有一个它的新实例被创建。
+
+
+## 通过 Prop 向子组件传递数据
+
+```
+<!-- 前端代码 -->
+<div id="app">
+    <blog-post v-for="post in posts" :post="post" :key="post.id"></blog-post>
+</div>
+```
+
+```
+// 后端代码
+Vue.component("blog-post",{
+    props:["post"],
+    template:`
+    <div>
+        <h1>{{post.title}}</h1>
+        <h1>{{post.id}}</h1>
+    </div>
+    `
+})
+
+let app = new Vue({
+    el:"#app",
+    data:{
+        posts:[
+            {
+                id:1,
+                title:"静夜思"
+            },
+            {
+                id:2,
+                title:"长歌行"
+            },
+            {
+                id:3,
+                title:"蜀道难"
+            },
+        ]
+    }
+})
+```
+
+## 监听子组件事件
+
+```
+<!-- 前端代码 -->
+<div id="app">
+    <blog-post v-model="name" :res="res" @input="input" @dd="print">
+    </blog-post>
+</div>
+```
+子组件可以通过调用内建的 $emit 方法并传入事件名称来触发一个事件：
+```
+// 后端代码
+Vue.component("blog-post",{
+    props:["name","res"],
+    template:`
+    <div class="blog-post">
+        <input type="text" :name="name" @input="$emit('input',$event.target.value)">
+        <input type="button" value="打印" @click="$emit('dd',$event.target.value)">
+        <br/>
+        <h1>{{res}}</h1>
+    </div>
+    `
+})
+
+let app = new Vue({
+    el:"#app",
+    data:{
+        name:"",
+        res:""
+    },
+    methods:{
+        input:function(data){
+            console.log(data);
+        },
+        print:function(){
+            this.res = this.name
+        },
+    }
+})
+```
\ No newline at end of file
diff --git "a/\351\273\204\345\256\207\347\205\214/6.9 Vue CLI.md" "b/\351\273\204\345\256\207\347\205\214/6.9 Vue CLI.md"
new file mode 100644
index 0000000000000000000000000000000000000000..61093d53424fa3a5ebeafabb920fab949fa9457a
--- /dev/null
+++ "b/\351\273\204\345\256\207\347\205\214/6.9 Vue CLI.md"	
@@ -0,0 +1,15 @@
+# Vue CLI
+
+## 修改linux文件权限
+chmod -R 777 文件夹名/
+
+## 修改Host文件
+
+### 修改 host 权限
+
+右键-属性-安全-高级-更改权限-添加-选择主体-高级-立即查找-选择Administrator-保存
+
+```
+// host 文件位置
+C:\Windows\System32\drivers\etc
+```