一 问题
通过 v-for 循环,无法看到页面图片。
<template>
<div v-for="img in imgs">
<img width="100%" height="100%" ;src="img">
</div>
</template>
<script>
export default {
name:"Home.vue",
data(){
return {
imgs:[
'../img/1.jpg',
'../img/2.jpg',
'../img/3.jpg'
]
}
}
}
</script>
二 视频
https://www.bilibili.com/video/BV1YE411A746?p=54
三 说明
开发一个 vue 项目,标准步骤:
1 用 vue-cli 拉取一个项目骨架。
2 安装依赖。
3 使用 npm run dev 进入开发者模式。
此时在开发模式中,各种修改都能看到实时效果,这些内容实际上是由 vue-cli 进行打包并发布到 node.js 上的。最后开发完成以后,要上生产,这些资源是需要我们手动部署在生产的服务器上的。哪些资源是需要我们手动部署的,需要通过npm run build 命令来构建资源。
4 使用 npm run build 命令来构建资源。
会产生一个 dist 文件夹。里面包含静态资源。
在开发环境下,要想使用静态资源,首先需要通过npm run build 命令来创建 dist 文件夹,然后将静态资源放入,再在 vue 的代码中,去该/dist/文件夹内取资源即可。