构建项目

rails new myapp --wbpaker --skip-bundle

将gem源修改为"https://gems.ruby-china.com"

bundel
yarn install

webpaker的搭建查看github

安装vue

rails webpacker:install:vue

以上的步骤可以直接为

rails new myapp --webpack=vue

其中目录结构为

vue目录结构

其中app.js是我自己修改过文件名，原名称为hello_vue.js

配置vue

首先新建app.html.erb文件。
内容为：

<!DOCTYPE html>
<!DOCTYPE html>
<html>
  <head>
    <title>Myapp</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    
    <%= javascript_pack_tag 'app' %>
    <%= stylesheet_pack_tag 'app' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

创建controller，创建一个admincontroller和appcontroller这两个controller分别作为多页面和单页面的父类。

rails g controller admin::admin
rails g controller app::app

目录结构

新建admin欢迎界面，和app欢迎界面

rails g controller admin::welcome welcome

将此welcomecontroller继承为admincontroller

rails g controller app::welcome welcome

将此welcomecontroller继承为appcontroller

app的welcome.html.erb内容清空。

routes文件中加入

Rails.application.routes.draw do
  namespace :app do
    get 'welcome' => 'welcome#welcome'
  end
  namespace :admin do
    get 'welcome' => 'welcome#welcome'
  end
end