rails5.1结合前端框架(一)

在rails5之后的版本中引入了webpack和yarn的方式来管理前端插件，可以使用yarn来安装需要使用的前端插件，使用webpack对前端框架进行打包.

创建rails项目

# need rails >= 5.1
rails new myapp --webpack

# install gems
bundle install

# run rails app
rails s

执行以上步骤之后，通过浏览器访问http://localhost:3000应该能打开rails的欢迎页

11.jpg

# use yarn install bootstrap and jquery
# bootstrap and jquery will be installed in node_modules dir
yarn add bootstrap
yarn add jquery@2

通过yarn安装的插件会被放置在项目的node_modules目录中，通过查看config/initializers/assets.rb文件，可以发现以下配置。rails在进行资源文件压缩的时候会默认把node_modules目录包含在处理文件中。

# Add additional assets to the asset load path.
# Rails.application.config.assets.paths << Emoji.images_path
# Add Yarn node_modules folder to the asset load path.
Rails.application.config.assets.paths << Rails.root.join('node_modules')

添加application.css文件中对bootstrap的引入

/*
*= require bootstrap/dist/css/bootstrap.min
*= require_tree .
*= require_self
*/

添加application.js文件中对bootstrap的引入

//= require jquery
//= require bootstrap/dist/js/bootstrap.min
//= require_tree .

完成以上配置之后,通过一个简单的页面测试以下bootstrap的使用效果

# create home controller
rails g controller home index
Running via Spring preloader in process 3952
      create  app/controllers/home_controller.rb
       route  get 'home/index'
      invoke  erb
      create    app/views/home
      create    app/views/home/index.html.erb
      invoke  test_unit
      create    test/controllers/home_controller_test.rb
      invoke  helper
      create    app/helpers/home_helper.rb
      invoke    test_unit
      invoke  assets
      invoke    coffee
      create      app/assets/javascripts/home.coffee
      invoke    scss
      create      app/assets/stylesheets/home.scss

修改app/views/home/index.html.erb文件,添加一个简单的bootstrap效果的标签做测试

<h1>Home#index</h1>
<p>Find me in app/views/home/index.html.erb</p>
<button type="button" class="btn btn-primary btn-lg btn-block">按钮</button>

22.jpg

到此为止，简单的介绍下引入bootstrap的方法。后续会介绍如何使用vue结合rails在项目中做实际开发(算这半年来的研究吧😂)