(GoRails )使用Vue.js制作拖拉list功能(v1-4) gem 'acts_as_list'(自动排列顺序)

系列视频：

use Vue.js to build the drag and drop support for the list themselves

the cards that are underneath them, and then we're going to be syncing（同步） this back to the rails app using AJAX。

async（异步）

---

视频1

app添加必要gem,  添加基础结构，建设Vue.js单文件组件app.vue，和packs/applications.js ，添加热重加载。

重点：添加library： vuedragger

初始化：

10283 rails new Trello --webpack=vue
10284 cd Trello
10285 atom .  然后add gem 'devise'
10286 bundle 
10287 rails g devise:install
10288 rails g devise user
10289 rails db:migrate

add gem 'bootstrap'和gem 'jquery-rails'

10292 bundle install
10293 git add .
10294 git commit -m 'Initialize/add gem devise, bootstrap, jquery-rails'

数据架构：

10295 rails g scaffold List name position:integer
10297 rails g scaffold Card list:references name position:integer

add gem 'acts_as_list'  （点击查看git） 用于自动排序

• （当一条记录的postion发生变化，其他的对应变化，比如在表格第一行插入一条记录，之后的记录的position会全部➕1）

类似于ranked-model（全占里面有教学，见博客）

10298 bundle install

---

在routes.rb加上 root to: 'lists#index'

在view/lists/index.html.erb