设为首页 收藏本站
查看: 964|回复: 0

[经验分享] Rails 在ubuntu上安装rails(rvm ruby gem Bootstrap bootswatch)

[复制链接]

尚未签到

发表于 2018-4-30 09:31:24 | 显示全部楼层 |阅读模式
  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 <wayneeseguin@gmail.com>, Michal Papis         <mpapis@gmail.com> [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详细说明
  https://ruby-china.org/wiki/rvm-guide  了解gemset

运维网声明 1、欢迎大家加入本站运维交流群:群②:261659950 群⑤:202807635 群⑦870801961 群⑧679858003
2、本站所有主题由该帖子作者发表,该帖子作者与运维网享有帖子相关版权
3、所有作品的著作权均归原作者享有,请您和我们一样尊重他人的著作权等合法权益。如果您对作品感到满意,请购买正版
4、禁止制作、复制、发布和传播具有反动、淫秽、色情、暴力、凶杀等内容的信息,一经发现立即删除。若您因此触犯法律,一切后果自负,我们对此不承担任何责任
5、所有资源均系网友上传或者通过网络收集,我们仅提供一个展示、介绍、观摩学习的平台,我们不对其内容的准确性、可靠性、正当性、安全性、合法性等负责,亦不承担任何法律责任
6、所有作品仅供您个人学习、研究或欣赏,不得用于商业或者其他用途,否则,一切后果均由您自己承担,我们对此不承担任何法律责任
7、如涉及侵犯版权等问题,请您及时通知我们,我们将立即采取措施予以解决
8、联系人Email:admin@iyunv.com 网址:www.yunweiku.com

所有资源均系网友上传或者通过网络收集,我们仅提供一个展示、介绍、观摩学习的平台,我们不对其承担任何法律责任,如涉及侵犯版权等问题,请您及时通知我们,我们将立即处理,联系人Email:kefu@iyunv.com,QQ:1061981298 本贴地址:https://www.yunweiku.com/thread-453881-1-1.html 上篇帖子: 怎么在Ubuntu上安装vagrant 下篇帖子: Ubuntu 16.10在VMware 10.12上不兼容问题解决
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

扫码加入运维网微信交流群X

扫码加入运维网微信交流群

扫描二维码加入运维网微信交流群,最新一手资源尽在官方微信交流群!快快加入我们吧...

扫描微信二维码查看详情

客服E-mail:kefu@iyunv.com 客服QQ:1061981298


QQ群⑦:运维网交流群⑦ QQ群⑧:运维网交流群⑧ k8s群:运维网kubernetes交流群


提醒:禁止发布任何违反国家法律、法规的言论与图片等内容;本站内容均来自个人观点与网络等信息,非本站认同之观点.


本站大部分资源是网友从网上搜集分享而来,其版权均归原作者及其网站所有,我们尊重他人的合法权益,如有内容侵犯您的合法权益,请及时与我们联系进行核实删除!



合作伙伴: 青云cloud

快速回复 返回顶部 返回列表