Vue CLI搭建炫酷Vue项目，美美的照片就是这么拍

准备工具和环境

越来越多人在网上找美美的照片了，特别是那个叫图虫摄影的平台，简直酷毙了！别担心，用Vue框架也能做出这种炫酷效果！

安装Vue CLI并创建项目

vue create tuchong-photo

用 Vue CLI 搞 Vue 项目就是搭积木，简单得很！直接在命令行里瞎点，根据提示来就行。项目的名字，功能都是你说了算！这样轻而易举地就能搭建出你想要的 Vue 项目！

安装所需插件

npm install -S vue-router vuex axios stylus stylus-loader

完工后别忘了使用VueRouter、Vuex以及Axios这些神器解决页面切换、状态保存和HTTP请求。Stylus和styletus-loader这两货能帮助你快速搞定样式问题，提高效率。所有工具都备齐了，大胆去迎接新的挑战！

配置路由与组件设计

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/views/Home'
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    }
  ]
})

简单说，就是把router文件夹拖进src里面，再搞个index.js搞定路由设置就行咯。到时上网就随你心意喽~然后，我们还得在views文件夹里放几个要靠路由跑起来的组件文件，比如Home.vue，这可是展示主页信息的地方。大胆创作你想要展示的内容，再用stylus稍微美化一番，绝对美翻天！

增加扩展功能

  

    

      
      
图虫摄影
      
发现与分享你的世界
    
  


export default {
  name: 'Home'
}


.home
  .banner
    position: relative
    height: 400px
    .banner-image
      width: 100%
    .banner-title
      position: absolute
      top: 50%
      left: 50%
      transform: translate(-50%, -50%)
      font-size: 3rem
      color: #fff
      text-shadow: 0 0 5px rgba(0, 0, 0, 0.5)
    .banner-subtitle
      position: absolute
      top: 50%
      left: 50%
      transform: translate(-50%, -50%)
      font-size: 1.5rem
      color: #fff
      text-shadow: 0 0 5px rgba(0, 0, 0, 0.5)

你听说过浏览器可不只是浏览网页这么简单吗？其实它还有好多超实用的小窍门喔。比如搜索、分类整理，给图片加标签，甚至还能了解每张照片的作者信息等，简直不能再方便。但是，想要使用这些功能，还得用到接口获取数据才行。这怎么办？别担心，我们可以新建几个文件，例如Search.vue、Category.vue和Photographer.vue这种类型的就可以了。然后在路由中设置好具体的地址就大功告成咯。不多说，快点试试！

总结与展望

跟我来学习怎么搞出图虫摄影网那种炫酷网站！先来定个项目，设好路子，接着搞定外观和特殊功能。搞定这些，你就知道vue框架是干嘛的。记得拉出来练练手！