rails5+vue2+webpaker环境搭建多页面和单页面混
2018-08-02 本文已影响0人
舒官人
构建项目
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
- 运行
rails s
./bin/webpack-dev-server
- 访问
APP页面（vue）
APP页面（vue）
管理端
管理端
