ubuntu-14.04.5-desktop-amd64
ruby 2.2.0
rails 4.1.4
提示:複製粘貼命令,執行報錯就手動輸入命令
1. 下載源設置成mirrors.aliyun.com/ubuntu 記得reload
2. install rvm
ubuntu有自己的安裝方式(curl方式會報pgp相關錯誤)
ubuntu install rvm 安裝方式https://github.com/rvm/ubuntu_rvm
rvm安裝完時的提示:
* First you need to add all users that will be using rvm to 'rvm' group,
and logout - login again, anyone using rvm will be operating with `umask
u=rwx,g=rwx,o=rx`.
* To start using RVM you need to run `source /etc/profile.d/rvm.sh`
in all your open shell windows, in rare cases you need to reopen all shell windows.
提示:terminal rvm: command not found 可以輸入/bin/bash -login
執行下rvm -v察看版本
rvm 1.27.0 (manual) by Wayne E. Seguin <[email protected]>, Michal Papis <[email protected]> [https://rvm.io/]
rvm安裝完成
rvm說明https://ruby-china.org/wiki/rvm-guide
3.install ruby
在安裝ruby之前執行下rvm list known察看可以安裝的ruby版本
rvm install 2.2.0可以指定某個版本安裝
安裝完成後 rvm list察看下版本
如果有多個版本使用rvm use x.x.x切換版本 (rvm use 2.2.0 --default指定默認版本)
ruby -v察看ruby版本
ruby安裝完成
安裝方式和管理系統https://www.ruby-lang.org/zh_cn/documentation/installation/
4.安裝rails
gem insatll rails -v 4.1.4 --no-ri --no-rdoc
顯示:
Successfully installed rails-4.1.4
24 gems installed
rails -v 察看下版本
安裝完成
5.啓動rails
rails new app 新建項目
cd app 進入項目文件夾
如果顯示:
********************************************************************************
* NOTICE *
********************************************************************************
* RVM has encountered a new or modified .rvmrc file in the current directory, *
* this is a shell script and therefore may contain any shell commands. *
* *
* Examine the contents of this file carefully to be sure the contents are *
* safe before trusting it! *
* Do you wish to trust '/home/tt/.rvmrc'? *
* Choose v[iew] below to view the contents *
********************************************************************************
y[es], n[o], v[iew], c[ancel]> n (輸入n)
rails s 啓動rails (rails s -p 9000指定端口)
顯示:
=> Booting WEBrick
=> Rails 4.1.4 application starting in development on http://0.0.0.0:3000
=> Run `rails server -h` for more startup options
=> Notice: server is listening on all interfaces (0.0.0.0). Consider using 127.0.0.1 (--binding option)
=> Ctrl-C to shutdown server
[2016-11-29 16:55:10] INFO WEBrick 1.3.1
[2016-11-29 16:55:10] INFO ruby 2.2.0 (2014-12-25) [x86_64-linux]
[2016-11-29 16:55:10] INFO WEBrick::HTTPServer#start: pid=10726 port=3000
在瀏覽器輸入http://0.0.0.0:3000 顯示Welcome aboard 歡迎頁面
6.安裝 bootstrap
ruby -v 察看版本(ruby 2.2.0p0 (2014-12-25 revision 49005) [x86_64-linux])
rails new myapp 新建項目
cd myapp 進入項目文件夾
vi gemfile 編輯文件,增加一行 gem 'bootstrap-sass', '~> 3.3.5'
bundle install 安裝
設置
修改app/assets/stylesheets/application.css 爲app/assets/stylesheets/application.scss
並添加如下的代碼來引用它
@import "bootstrap-sprockets";
@import "bootstrap";
("bootstrap-sprockets"的導入必須寫在 "bootstrap" 和"bootstrap/variables"之前
刪掉這個文件中所有的//require和//=require_tree標籤，都改爲@import來引用剛剛下載的zip包裏的sass文件。不使用//require是因爲這樣就無法訪問bootstrap的混合類型和變量。)
在app/assets/javascripts/application.js中添加對bootstrap js的引用：
//= require jquery
//= require bootstrap-sprockets
完成設置
rails g scaffold product name price:decimal description:text 創建表
rake db:migrate 更新數據庫
rails s 啓動rails
http://0.0.0.0:3000/products 顯示默認創建的頁面
myapp/views/products/index.html.erb 在頁面最後增加以下代碼(刷新頁面,在下一步安裝bootswatch後樣式會有改變)
<div class="container">
<div class="jumbotron">
<h1>我的第一個 Bootstrap 頁面</h1>
<p>重置窗口大小，查看響應式效果！</p>
</div>
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>學的不僅是技術，更是夢想！</p>
<p>再牛逼的夢想,也抵不住你傻逼似的堅持！</p>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<p>學的不僅是技術，更是夢想！</p>
<p>再牛逼的夢想,也抵不住你傻逼似的堅持！</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<p>學的不僅是技術，更是夢想！</p>
<p>再牛逼的夢想,也抵不住你傻逼似的堅持！</p>
</div>
</div>
</div>
安裝 bootstrap 參考網站:
http://www.bootcss.com/
http://v3.bootcss.com/getting-started/#download
https://github.com/twbs/bootstrap-sass#a-ruby-on-rails
http://www.runoob.com/bootstrap/bootstrap-intro.html
bootstrap 定製:
http://v3.bootcss.com/customize/
7.安裝 bootswatch
在gemfile 增加 gem 'bootswatch-rails'
bundle install 安裝
設置
修改app/assets/stylesheets/application.scss 爲app/assets/stylesheets/application.css.scss
替換之前的2個@import
//Import bootstrap-sprockets
@import "bootstrap-sprockets";
// Import cerulean variables
@import "bootswatch/cerulean/variables";
// Then bootstrap itself
@import "bootstrap";
// Bootstrap body padding for fixed navbar
body { padding-top: 60px; }
// And finally bootswatch style itself
@import "bootswatch/cerulean/bootswatch";
// Whatever application styles you have go last
@import "base";
新建 app/assets/stylesheets/base.css.scss
完成設置
rails s 啓動
http://0.0.0.0:3000/products 剛纔的樣式改變了
新的模板:
將app/views/layouts/application.html.erb 其中<body></body>,
替換爲 https://github.com/scottvrosenthal/twitter-bootswatch-rails/blob/master/lib/generators/bootswatch/layout/templates/layout.html.erb 中
<body><div>包括這裏所有</div><%%= yield %></body>
刷性頁面,Bootstrap theme這行是藍色,完成備註:更新gem
gem -v 察看版本默認2.4.6
gem update --system 更新爲2.6.8
備註:gem -v察看版本(2.4.6)
gem server會啓動127.0.0.1:8808 (RubyGems Documentation)
gem environment 安裝路徑說明
https://www.ruby-lang.org/zh_cn/libraries/ gem詳細說明
https://gems.ruby-china.org/ gem詳細說明