VUE组件插槽

94 阅读1分钟

1.VUE组件插槽:

   

   

   

    Document

   

     

         

          我是底部bottom按钮

       

我是标题内容

       

   

   

   

   

       new Vue({

           el:"#app",

           /* 注册组件的命名是首字母大写 使用组件的时候中间要使用-分割 */

           components:{

               ChildA:{

                   template:"#childa"

               }

           }

       })

       /* 有一个模态框组件child 需要显示的是标题内容和底部的bottom */

       /* 默认只有中间的内容 需要使用child的时候 插入标题和底部bottom  */

   

效果图:

2.es6导入导出:

   

   

   

    Document

    <!-- 本地使用es6导入script必须添加上type="module"

       必须使用live server 启动一个域名端口打开 -->

   

   

        /* 导入一个对象 */

       import obj from './1.js'

       console.log(obj);

   

JS文件:

/* 默认导出一个对象 */

export default{

    name:"youyuxi"

}

3.脚手架安装:

新建文件夹取名webapp-vue,在文件夹内使用npm init -y 新建一个package.json文件

在你当前的文件夹内,按住shift,右击鼠标选择powershell命令窗口

使用npm i -g @vue/cli  全局(整个电脑)安装一个脚手架工具 名字叫做vuecli4

等待安装安装完之后

输入vue -V检查vuecli脚手架版本 发现报错

输入set-ExecutionPolicy RemoteSigned再根据提示输入大写的Y回车