系列视频：
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?️添加：
<%= tag.div("dsa",id: :boards, data: { lists: @lists.as_json(include: :cards)})%>
tag.(optional content, options)
⚠️：这是5.1中的ActionView::Helper::TagHelper方法，在5.2版本的Module中被去掉了。但仍可以在Rails5.21中使用。
⚠️老版Rails的to_json从3.0就改成as_json方法，但都能用，功能一样。
安装资源库：从Vue资源：https://github.com/vuejs/awesome-vue下载
Libraries/UI Components/Form/Drag and Drop
yarn add vuedraggable (5000?) (点击查看git)
在layout／application.html.erb上的
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload'%>
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'%>
⚠️：
- media: 'all' 是默认值，代表接受任意的设备类型（iphone, computer, screenreaders等等）
- media属性被用于指定目标URL, 目标URL是为特定的设备所设计。
⚠️：热重加载：(热重载) Hot Reload(hot reload)
这是Vue Loader的功能之一
修改 .vue 文件时，该组件的所有实例将在不刷新页面的情况下被替换。
保持了应用程序和被替换组件的当前状态！（有3条规则）
当你调整模版或者修改样式时，这极大地提高了开发体验。
状态保留规则:
- 当编辑一个组件的时，这个组件实例就地重渲染，保留当前的所有私有状态。
- 当编辑一个组件的