近期根据学校要求在实习……但是空闲时间还挺多的，公司用的是vue-cli和webpack等技术，以前没接触过，恶补了一通后手痒，想试试自己能不能写个小项目，写博客主要是想记录下过程，说不定以后还能翻出来看看：当年写的是什么垃圾代码！
安装和搭建vue-cli脚手架
公司的电脑是已经装好的，在自己电脑上也装了一遍，先下visual studio code，然后使用npm命令，具体过程就不放了，网上搜的有很多，我自己搜来搜去最后也装好了，最后安装完是这样的：
main.js和App.vue
main.js是整个程序的入口页面，在这里可以引入要使用的东西，还有加载全局变量及公共组件。比如我会在项目中使用iView，就可以在下载完iView后加上Vue.use(iView)，此外还有Vue的路由跳转。Vue.config.productionTip = false是阻止生产提示，设为false。
App.vue最初是这样的：
<router/view></router-view>是负责渲染路由和视图的组件，因为我们构建的是单页应用（SPA），会跳转页面的内容，但并不会刷新页面，这样可以提升页面的速度，所以vue中路由跳转也占了很多部分。
构建第一个我的vue页面
在终端中输入命令：npm run dev就可以在localhost:8080上看见自己的页面了。初始默认的项目只有Vue自己的logo，在这里先试着编写第一个页面：404。
404页面的作用是每当输入的url没有对应的页面可以显示时，就显示404，这样可以防止页面一片空白混淆开发人员。
现在404页面可以正确出现了！
在正式开始工作之前，需要设计一下自己想要的究竟是什么样的效果……
基础功能：旅游预订，旅游攻略查询，旅游景点评价。
因为本人主要是前端方向，不太设计到后端，所以数据一般是伪数据，主要是想完成对用户友好的界面设计。
制作一个首页
思考后想把首页做成一个轮播图形式，因为也没有美工哈哈哈所以就自己怎么高兴怎么来了，虽然经常被朋友说审美诡异：）
遇到的第一个问题就是图片尺寸不适应屏幕！
百度了半天后发现可以使用window.onresize()，当屏幕大小发生变化时就启动这个函数，最后总结方法如下：
①在data中先设置默认宽高
②使用window.onresize()，当屏幕大小发生变化时改变，watch监听，每当pHeight或pWidth发生变化时，就重新赋予图片宽高
③插入图片并设置宽高：
最后达到了想要的效果，但是！！代码太繁琐了！！总不能每想改一下图片就到处都要改，而Vue这个前端框架的精髓是什么？就是组件化！我个人理解组件化类似于一块块七巧板，每一块都是独立的个体，但是通过各种组合就能拼成不同的形状，组件也是各自独立但都能被同一个.vue文件引用，最后实现不同的效果。
所以思考后可以写一个轮播图组件，由首页这个父组件向轮播图子组件传递图片，而子组件就负责把接受到的图片变成轮播图效果，此处轮播图使用了iView的走马灯效果（Carousel）
以上是子组件Carousel，使用了v-for播出图片，而父组件MainMenu只需要在data中设立一个图片url的数组
然后再把他们传给子组件并应用子组件：
顿时比刚才的代码简洁明了多了！想要改变轮播图的图片也只需要在父组件的pics[]中增加或删除图片的url即可，顿时也简化了操作，这就是Vue的组件化开发。
最后实现的效果是这样的，个人还蛮喜欢这种风格：
其实左右两边是轮播图的箭头的……但是截图还是有点糊，可能看不清，第一阶段就先这样了！！感谢阅读到这里的你！！