脚手架安装的问题:
1.安装node.js,配置环境变量,cmd输入node -v和npm -v可以看到版本号(如果显示不是命令,确认环境变量是否配置成功,记得配置环境变量之后重新打开cmd,再去验证)
2.在安装cnmp时,大堆错误提示,记得以管理员身份打开cmd,在安装东西
3.在创建脚手架时,cmd中在索要创建脚手架项目的文件夹目录下输入vue create myvue1
4.运行main.js文件,右键->open in Integrated Terminal(或快捷键ctrl+~),打开终端,
在终端中输入:npm run serve
如果出现错误,提示没有脚本权限
解决方法:参考(npm : 无法加载文件 C:\Program Files\nodejs\npm.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参阅 https:/go.microsoft.com/fwlink-CSDN博客),我这个执行到第二步就可以解决了
默认插槽:
实现效果:
代码:
App.vue:
<template><div class="container"><Category title="美食"><img src="../images/flower.jpg" alt=""></Category><Category title="游戏"><li v-for="(item, index) in games" :key="index">{{ item }}</li></Category><Category title="电影"><video controls src="../images/school.mp4"></video> </Category></div>
</template><script>
import Category from './components/Category.vue';export default {name:'App',components:{Category},data(){return {foods:['鱼','虾'],games:['你好','你好好'],films:['猪猪侠','武林外传']}}
}
</script><style>
/* img、video放这里或者Category都行 */
img {width: 100%;
}
video {width: 100%;
}
</style>
Category.vue
<template><div class="category"><h3>{{ title }}分类</h3><!-- 插槽 --><slot>我是默认插槽,当没有内容时,我就会出现</slot></div>
</template><script>
export default {props:['title','listData']}
</script><style>
.category {background-color: skyblue;width: 200px;height: 300px;float: left;margin-left: 20px;
}
.category h3 {text-align: center;background-color: orange;
}
.category li {padding-left: 30px;
}
</style>