我最近喜欢上了用Vue.js和Ruby搞网站，特别好用！今天就来聊聊如何很快地用它们建立高效的网站，包括像闪电般完成Vue.js项目、轻松设置网页布局、搞好API和前后端的连接等等。

快速创建Vue.js项目

npm install -g @vue/cli

vue create project-name

首先，得先搞定VueCLI这个大神器，有它我们可以很快就弄出一个Vue.js项目来。搞定之后，记得去设置里把一些好用的小玩意儿选上，像是让Babel帮忙处理ES6新语法，再加上VueRouter和Vuex这对黄金组合，你的网页就能变得超级炫酷！

不想让Vue展示你的Web数据？小菜一碟！首先，在src文件夹搞个components文件夹出来，然后添个List.vue小网页进去。再把List.vue拖动到App.vue文件中。别忘记在main.js文件引入App.vue，最后把它挂到HTML上就大功告成了！

  

    

      {{ item.name }}
    
  


export default {
  data() {
    return {
      list: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ]
    }
  }
}

创建后端API

赶紧学学Ruby！先装上RubyonRails，这玩意儿以后肯定有用到！弄好后，咱们设了个“Item”模型，又给它搭了个Items控制器方便控制。接着，就靠库代码搞定那个名为Item的数据库表格~

  

    
My App
    
  


import List from './components/List.vue'
export default {
  components: {
    List
  }
}

首先咱们要弄个叫“Items”的控制器，方便检索东西，还给它配上“index”功能，让它把所有宝贝儿都查出来。接下来，把得到的信息打包成JSON发到浏览器。别忘了在配置文件config/routes.rb里加条路由，这样谁来访问都能找到这个控制器，咱们的API就大功告成！

import Vue from 'vue'
import App from './App.vue'
new Vue({
  render: h => h(App)
}).$mount('#app')

连接前端页面和后端API

咱来试试用前端接后端API这种新潮的方法，让服务器动起来！要不就在浏览器上试试那个私人订制版APP？特酷！只要你会Vue.js和Ruby，创建高效网络应用就是小菜一碟！

gem install rails

赶紧学起来！我教你怎么用Vue.js和Ruby快速搭建网站。前后端开发可以分开做，省时又方便！只要掌握了Vue.js的组件开发和RubyonRails的快速实现功能，建站就跟玩耍一样简单，速度快到让你惊讶！

rails new api

搞定了VueCLI，搞明白了Vue那些小技巧，然后弄对了RubyonRails的模型、控制器这些东西，感觉自己前端后端开发都挺溜的。现在，用Vue和Ruby搭什么网站啥的，简直小菜一碟！

亲们，你认为前端开发还是后端开发更有趣？快点告诉我！

rails g model Item name:string
rails g controller Items

rails db:migrate