阿尔汉布拉宫哪个部分最值得看？精华景点推荐别错过！

今天跟大家聊聊我最近搞的“阿尔汉布拉”，不是吃的喝的，是我用 Vue 搞的一个小项目，主要是练练手，也跟大家分享一下过程。

起因：

一开始就是想找个东西练练 Vue，之前都是零零散散看教程，感觉没啥意思。正好最近对西班牙的历史文化有点兴趣，就想着能不能做一个跟阿尔汉布拉宫相关的网站，展示一些图片、介绍啥的。

准备工作：

找素材： 这部分花我不少时间。阿尔汉布拉宫的图片太多，高清的、不同角度的，简直挑花眼。是从一些旅游网站和图库里扒拉一堆，还整理一下，分门别类放 确定框架： Vue 全家桶肯定是要用的， Vue Router 做路由， Vuex 做状态管理，再加个 Axios 请求数据。UI 框架一开始想用 Element UI，后来觉得太重，就用个轻量级的 Vant。 设计页面： 这个我比较菜，没啥设计功底。就参考一些旅游网站的布局，简单画个草图，主要就是首页、景点介绍页、图片展示页这几个。

开始撸代码：

搭架子： 先用 Vue CLI 把项目跑起来，然后把 Router、 Vuex 这些依赖装目录结构也稍微整理一下，components 放组件， views 放页面， assets 放静态资源。

首页： 首页比较简单，就是一个大的背景图，加上一些文字介绍。背景图用 CSS 的 `background-image` 属性，文字介绍直接写在 HTML 里。 景点介绍页： 这个页面稍微复杂点，要展示景点的名称、介绍、图片。我把数据写在一个 JSON 文件里，然后用 Axios 请求过来，再用 v-for 循环渲染。 图片展示页： 这个页面就是展示一些高清图片，可以放大缩小。我用个 Vue 的图片预览组件，体验还不错。 路由： 用 Vue Router 配置几个路由，首页、景点介绍页、图片展示页，每个页面对应一个组件。 状态管理： Vuex 主要用来管理一些全局的状态，比如当前选中的景点，当前浏览的图片等等。

遇到的坑：

图片加载： 有些高清图片比较大，加载很慢。我用个 `vue-lazyload` 插件，实现图片懒加载，体验好多。 移动端适配： 用 Vant UI 主要是为移动端适配。但是有些样式还是需要自己调整，比如字体大小、间距等等。 Axios 请求跨域： 本地开发的时候， Axios 请求跨域。我用 Vue CLI 的 proxyTable 配置代理，解决跨域问题。

整个项目断断续续搞几天，虽然功能很简单，但是也学到不少东西。Vue 的组件化开发、路由、状态管理，还有一些常用的插件，都实际用一遍。

练手项目不在大小，关键是要动手去做。

遇到问题不要怕， Google 一下， Stack Overflow 上总能找到答案。

多看别人的代码，学习别人的思路和技巧。

以后有机会再跟大家分享其他的实践项目。