VueCli
项目中关于图片的处理
项目中所需要的使用的图片,可以存放在public
目录下,也可以存放在src
下(通常在src/assets
目录中)。
如果将图片放在public
目录下:
该图片将作为静态资源,一起打包。
如果将图片放在src/assets
目录下:
脚手架在运行时将会编译src
下的所有资源。 脚手架项目一定要经过编译(将src
下的源码资源文件转换成浏览器所能解析运行的html、css、js
)才可以正常运行。
对于src
下的图片,脚手架在编译时,发现如果图片足够小,则将图片编译成base64
图片编码,直接赋值给src
属性。在页面运行时减少小图片的请求频率,优化性能。
在项目根目录下,执行命令,编译整个脚手架项目:
npm run build
编译完成后,将会生成dist目录,即完整的静态网站项目。
如何访问public下的图片呢?
若有如下图片资源:
public
img
1.jpg
2.jpg
访问方式(斜杠开头,绝对路径直接从public
向下找即可):
<img src="/img/1.jpg"/>
如何访问assets
目录下的图片呢?
若有如下图片资源:
src
assets
tabs
index_0.png
me_1.png
src
下的资源都使用相对路径来访问:(不使用斜杠开头)
<img src="../assets/tabs/index_0.png"> 正确
<img src="@/assets/tabs/me_1.png"/> 正确 @代表src目录
什么样的图片适合放assets
下编译打包?
项目中所必须使用的小图标适合放assets
中。
什么样的图片需要放public
下直接打包?
除了上述图片资源之外的图片,都适合放public
。
注意!!如果给src
添加了冒号 :src
后,脚手架将不会对该路径进行编译,最终将会把动态地址直接赋值给src。这将会assets
下的资源访问不到。如果想要正常访问,需要在相对路径外套一个require(path)
方法手动编译图片资源。
结论:
- 项目中必须使用的小图标放
assets
,其他图片可以放public
。 assets
下的图片会编译,public
下的图片则直接打包。public
下的图片用斜杠开头直接访问,assets
下的图片用相对路径(… 或 @)访问。- 若使用相对路径时,还需要给
src
加冒号,那么得长个心眼儿,在路径外需要套一个require
搭建项目基础结构
设计嵌套路由:
访问:/时,看到首页HomeView.vue,包含:<router-view/> 与 底部选项卡。
访问:/home/index时,看到首页上半部分占位符中显示Index.vue
访问:/home/video时,看到首页上半部分占位符中显示Video.vue
访问:/home/show时,看到首页上半部分占位符中显示Show.vue
访问:/home/me时,看到首页上半部分占位符中显示Me.vue
实现点击底部选项卡时,上半部分动态更新
实现步骤:
-
新建四个二级路由页面组件:
src/views/index/Index.vue src/views/video/Video.vue src/views/show/Show.vue src/views/me/Me.vue
-
配置嵌套路由:
/home/index 看到HomeView.vue中包含Index.vue /home/video 看到HomeView.Video.vue /home/show 看到HomeView.vue中包含Show.vue /home/me 看到HomeView.vue中包含Me.vue
-
在
HomeView.vue
的上半部分,补一个占位符:<router-view />
实现Index.vue
的静态页面的编写
NavBar
标题栏AppHeader
广告栏#top-nav
顶部导航栏MovieItem.vue
电影列表项的显示- 优化布局结构
进入App
后,展示热映类别下的电影列表
需求分析:当进入App
首页后,自动加载热映类别下的首页电影列表数据,并展示电影列表。
实现步骤:
-
在组件挂载完毕后,发送
http
请求,访问热映类别下的电影列表数据。 -
从上一个项目中,将
http
文件夹复制过来,放到src
下。 -
准备好服务器:
启动xampp的mysql服务器。 pm2 start index.js pm2 start uploadserver.js
-
准备好
MovieApi
接口,提供方法,访问某一个类别下的电影列表数据。 -
拿到返回的结果后,通过
v-for
在页面中显示。