使用Tailwindcss+Vite+Pug+LESS 開發環境建置

本篇與上一篇使用Vitawind安裝Vite+Tailwindcss+Pug+LESS 開發環境建置 非常的雷同,但上一篇我們的主體是使用 vitawind ,雖然很快、很便利,但有點遺憾的是 vitawind 目前是使用 Tailwindcss 2 的版本,可是現在 Tailwindcss 3 已經推出好一陣子了,所以如果想用新版本的 Tailwindcss 還是得換個方式才行,但 vite 真的不錯用,所以這篇我們就來看看怎麼在 vite 下使用新版 Tailwindcss 吧!

1.建立 vite 專案目錄並切換到專案目錄

在terminal 終端機裡輸入以下指令:

npm init vite 專案目錄
cd 專案目錄

2.安裝 Tailwindcss 與 Less 、 pug 、 vite-plugin-pug

在terminal 終端機裡輸入以下指令:

npm install -D tailwindcss postcss autoprefixer less pug vite-plugin-pug

3.建立 Tailwindcss 相關設定檔

在terminal 終端機裡輸入以下指令:

npx tailwindcss init -p

指令跑完後,你的專案資料夾就會多了「tailwind.config.js」和「postcss.config.js」兩個設定檔,打開tailwind.config.js 做以下修改:

module.exports = {
content: [
"./index.html",
"./src/*/.{vue,js,ts,jsx,tsx,pug}",
],

theme: {
extend: {},
},
plugins: [],
}

因為我們要整合pug,所以記得要把pug加進去,你也可以設定其他的路徑放置pug檔,但建議還是放在src裡統一管理會比較好。

4.在css 裡引用 Tailwindcss

在scr資料夾裡新增index.css,貼上以下程式碼:

@tailwind base;
@tailwind components;
@tailwind utilities;

接著在mai.js裡引入css:

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
createApp(App).mount('#app')

你可以在index.html 或 App.vue 裡試著使用Tailwindcss

<h1 class="text-3xl font-bold underline"> Hello Tailwind! </h1>

在terminal 終端機裡輸入以下指令:

npm run dev

如此一來就可以進入開發模式,你就可以在你的本機電腦上看到結果了。

5.less 與 pug 的運用

由於我平常習慣使用less + pug 來開發,所以這裡我也講一下怎麼設定less 與pug 的部份。首先我們先講Less的部份,由於我們使用vite的關係,Less 已經可以直接使用,只要在src資料夾中新增「ooo.less」的檔案,然後在main.js引入即可。pug的部份稍微麻煩一點,要打開vite.config.js,然後做以下修改:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// pug
import pugPlugin from "vite-plugin-pug"
const options = { pretty: true } // FIXME: pug pretty is deprecated!
const locals = { name: "My Pug" }

// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue(),pugPlugin(options, locals)]
})

接著可以在src資料夾裡新增一個Pug檔,我們就先取名叫template.pug 吧!然後記得在裡面寫一些pug,如果你跟我一樣懶,那你可以複製下面的code:

h1.text-green-500 Hello World
p I'm a cool Vite project!

再來我們到index.html裡,在body 裡使用以下方式引用 pug 進入頁面。

<pug src="./src/index.pug" />

在terminal 終端機裡輸入以下指令:

npm run dev

進入開發模式,你就可以看到 less 與 pug 的成果。

6.開發與打包

開發指我們前面已經用過很多次,

在terminal 終端機裡輸入以下指令:

npm run dev

就會進入開發模式,而輸出打包的指令是:

npm run build

指令跑完後,你會發現多了一個「dist 」 資料夾,這個資料夾裡的東西就是你的開發結果喔!

結語

使用Vitawind安裝Vite+Tailwindcss+Pug+LESS 開發環境建置 相比,這篇的方法只多了一點點步驟,但卻可以使用最新的Tailwindcss ,後續使用方式其實也差不多,所以我比較建議用這個方法,雖然麻煩了一點點,但可以用新版Tailwindcss 還是比較好啊!

使用Vitawind安裝Vite+Tailwindcss+Pug+LESS 開發環境建置

前言

最近的新專案想導入Tailwindcss,主要是希望在團隊合作上可以有個前端共用的framework,降低協作時各寫各的的情況,尤其是我個人的寫法其實比較接近Tailwindcss,所以我在HTML的class name 總是很長,當然有同事跟我反應這樣寫好像很亂很複雜,但我卻覺得這樣才會達到CSS 最少化的情況,減少我們一直重複輸入同樣的CSS,替代成剪短的class name,如果css 架構規劃的好,最終會變成自己的framework,而且幾乎不需要再寫CSS,開發速度會更快,可以把時間花在更重要的事情上,這個想法我已經有4~5年以上了,遺憾的是這4~5年我很少自己開發前端,所以我的想法一直沒有實現,然後這2~3年左右的時間,我從發現Tailwindcss 到等他普遍被使用的這段時間,證明了我的想法是對的,大家逐漸採用或願意試用Tailwindcss,剛好手邊有個新專案,就來紀錄一下我的環境設定吧!除了Tailwindcss 我還會整合pug 與 less 在這個專案上,下次要使用就可以快速生成了。

1.確保你有node.js 與 NPM

我在node.js 與套件版本控管套件 n 這篇裡有描述如何安裝node.js 與npm 的部份,這裡我就不多加描述。

2. 安裝Vitawind

Vitawind 是 vite 與 Tailwindcss的整合包,內建很多template 可以讓你快速建立各種開發起始資料夾結構。是目前就我找到的資料裡,最快速、最簡單可以建立 vue + tailwindcss 開發環境的方法。

請依據你的需求選擇安裝指令:

輸入完上訴指令,接下來要切換到專案資料夾 cd 專案名稱

進行安裝程序 npm install

然後啟動 npm run dev

接著用瀏覽器打開畫面上的網址,再來就是恭喜你成功了!有沒有簡單到嚇人?

Vitawind 的詳細文件在這裡 https://vitawind-blog-tw.vercel.app/scaffolding/templates.html

唯一的缺點是Vitawind 整合的是 tailwindcss v2.2.7,而不是最新版的Tailwind。

3.安裝pug 與 less

安裝可以處理pug 與 less 的套件

npm install -D less pug vite-plugin-pug

vite-plugin-pug 是讓 html 可以 <pug src="example.pug"></pug> 的方式在html 裡。

4. 設定pug 與相關使用方式

新增vite.config.js 檔案在更目錄中,貼上一下設定

// vite.config.(js|ts)
import { defineConfig } from "vite"
import pugPlugin from "vite-plugin-pug"
const options = { pretty: true } // FIXME: pug pretty is deprecated!
const locals = { name: "My Pug" }
export default defineConfig({
plugins: [pugPlugin(options, locals)],
})

在src目錄裡新增index.pug,你可以在裡面寫一些pug 內容,或複製以下內容

//- index.pug
h1 Hello World
p I'm a cool Vite project!

接著在index.html 的 body 裡使用 <pug src="index.pug" /> 即可在開發模式下看到引用的pug 內容。

如果有問題請確認你的pug 檔有放在 src 資料夾中。

5. 設定less 相關使用方式

在src 資料夾中新增template.less,然後在Main.js 裡新增import './template.less' 記得在裡面寫一些css,接著你就會在開發模式中看到效果。

另外如果你要在less裡用tailwindcss,記得修改tailwind.config.js,然後在purge的部份新增pug,如下

// const colors = require('tailwindcss/colors')
module.exports = {
mode: 'jit',
purge: ['index.html','./src/*/.{js,jsx,ts,tsx,vue,pug,html}'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
plugins: [],
}

結語

使用這個方式開發可以即時瀏覽修改畫面,開發上非常便利,建議直接保留一個開發資料夾,下次指令可以打少一點!最後開發完成的指令是 npm run build , 執行接受後就會看到一個 dist 資料夾,這個就是你要交付的結果了!

node.js 與套件版本控管套件 n

前言

最近的新專案總要用到node.js 環境,所以乾脆寫個筆記,紀錄一下常用的指令。對初學者來說是蠻嚇人的,畢竟沒有圖形介面,全部都要靠指令的方式進行,親和力還是比較差一些,但一旦使用過幾次後,就會發現其實沒有這麼不好懂,

1. 確認你有安裝node.js 與 npm

在終端機(Terminal)輸入 node -v 你會看到目前你使用的node.js 版本,如果沒有安裝請輸入 brew install node ,如果你沒有 brew 請安裝brew , 在不然,最簡單的方式就是去官網下載軟體安裝:https://nodejs.org/

安裝node.js 時就會自動安裝 npm ,也就是 node.js 套件管理工具,你可以在終端機(Terminal)輸入 npm -v 上訴指令就是查看npm 版本用的。我們想來實際安裝一個套件,最後我們在回來講解npm的用法。

2. 建議安裝 n 管理 node.js 版本

對於常在不同專案裡跳來跳去的接案工作室來說,n 是我們很常用到的套件, n 的工能是讓我們在不同的專案裡可以切換不同的node.js 版本,很多時候我們接手別人的專案,常常會有環境跑不起來的問題,通常把node.js 切換到就一點的版本就可以改善了,所以非常建議安裝 n ,但如果你不需要接手別人的專案,單純自己開發,那你可以先跳過n 套件的學習。安裝 n 的方法很簡單,你只要在終端機(Terminal)輸入以下指令: npm install -g n

上方的指令是指我要在整個node.js 世界裡多使用 n 套件, 所以在安裝指令上我們使用「-g」這個安裝設定,如此一來我們就可以在全部的node.js 環境裡快速切換node.js 版本!

3. n 的基本操作指令

安裝特定版本的node.js只要在終端機(Terminal)輸入 n (版本號) 例如可以打 n 14 就會安裝node.js 14 版本。

想切換已安裝的版本只要輸入 n 接著用上下鍵切換版本後按下enter 即可。

刪除某版本則是 n rm (版本號)

安裝穩定版本 n stable

安裝最新版 n lastest

最後是指定版本運行 n use (版本號) (app名稱).js 例如 n use 14 mytest.js

4. NPM 的用法

NPM 的用途就是管理套件,所以常用指令不外乎安裝套件、更新套件與刪除套件,基本上初學者只要會這些就夠應付大部分的案子了。安裝套件會有兩種情況,一種就是全域安裝,而另一種這是指安裝在單一專案裡,剛剛的 n 套件我們已經說過全域安裝指令是 npm install -g n 因為 n 套件是管理node.js 版本,所以需要區域安裝,那如果我需要單一專案裡使用的套件,我該怎麼安裝呢? 我們改安裝 pug 套件試試 npm install pug 你會發現全域安裝與單一專案的安裝只差在「 -g 」這個設定,所以如果今天你要全域安裝就加上 -g 不需要則不加,而 -g 的設定不一定要放在 install 指令後面,也可以放在最後面 npm install n -g

學會了安裝套件,現在我們來說移除套件,移除套件也分全域安裝與單一專案安裝,只是從install的安裝改成了「不安裝」npm uninstall pug

更新套件就更簡單了 npm update pug

那如果我們裝了太多忘記自己裝了什麼該怎麼辦?這時你可以列出套件清單 npm list 那如果你需要列出全域的該這麼做?如果看完問題你已經知道答案,那我恭喜你,你已經會舉一反三了!答案就是 npm list -g

list 這個指令還可以簡寫成 ls ,所以你輸入 npm ls 也會獲得相同結果。

npm其實大概就是這樣,在你每次install 或 uninstall 等行為時,你會發現專案根目錄會出現一個package.json 與一個 package-lock.json,這兩個檔案就是在紀錄你的套件安裝版本,當其他人取得這個專案檔案的同時也會取得環境設定檔。

另外有一個奇怪的狀況,可能是你拿到別人的專案或是一直install 、 uninstall 可能會遇到npm 暫存導致一直噴錯誤訊息「npm resource busy or locked」,這個時候請使用請暫存指令npm cache clean

5. 如何安裝其他專案

不管你是拿到zip壓縮打包檔或是git 拉下來的檔案,請先檢查有沒有package.json 與 package-lock.json,通常來說,你只要把專案資料夾放到你的本機網站目錄區,接著輸入 npm install 就可以正常執行專案了。

但如果你沒有這麼好運,你可以打開package.json 查看dependencies裡所需安裝的套件跟你install 完之後的套件有無誤差,通常我會把專案資料夾裡的node_modules 資料夾刪掉,然後清一次npm的暫存,接著在重新install 一次,你會發現原本刪掉node_modules 資料夾又回來了,如果安裝順利,你可以在scripts 找到其他指令,通常會是 npm start

如果不是,你應該可以在scripts 找到啟動指令,記得前面要加上npm 喔!

[教學] CodeIgniter 4 快速上手 (二) 建議簡單的簡易最新消息-新增篇

在上一篇[教學] CodeIgniter 4 快速上手 (ㄧ) 下載與安裝裡有提到,CodeIgniter 4 是採用PHP7重寫整個架構,根據測試PHP7的執行效率,PHP7是PHP5至少兩倍快,這是許多PHP開源系統所以公開的訊息,而CodeIgniter是一個輕量級的PHP框架,意思是簡單易上手,而且說明書也算簡單易懂。雖然說CodeIgniter是一個輕量級PHP框架,內建function與功能當然沒有Laravel來得多,但Laravel最令人詬病就是他不夠輕巧、檔案過多,如果你只是需要一些常見功能與MVC架構做前後端分離,那CodeIgniter絕對會是你的首選。

所以CodeIgniter對我來說就像瑞士刀一樣,你需要的基本功能CodeIgniter都有,本篇我們就來試試程式設計的基本4大功能,也就是新增(create)、刪除(delete)、查詢(read,也譯作讀取)、修改(Update),中文簡稱增刪查改,英文簡稱為CRUD,而一次可以練習到這四項功能的部分就是最新消息這個常見功能了!為了避免篇幅過長,本篇就以最簡單的純文字最新消息作為一個基本練習,為了篇幅過長,這一篇我們先來講解新增create功能吧!

step1. 基本開發環境建置

架設基本CodeIgniter 4基本環境,詳細步驟請參考上一篇[教學] CodeIgniter 4 快速上手 (ㄧ) 下載與安裝

step2. 新增MVC的V

在專案根目錄/app/view 裡面新增一頁list.php,貼上以下HTML Code

<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>News List</title>
    <style>
        body{
            margin: 0 auto;
            padding: 0;
            text-align: center;
        }
        ul{
            width: 50%;
            margin: 0 auto;
            padding-inline-start: 0px;
        }
        li{
            list-style: none;
            border:#333 1px solid;
            margin: 10px 0;
        }
        hr{
            border: none;
            border-top: #666 1px solid;
        }
        @media (max-width:750px){
            ul{
                width: 90%;
            }
        }
    </style>
</head>
<body>
    <h1>News List</h1>
    <a href="#">Add News</a>
    <ul>
        <li>
            <h3>News title</h3>
            <p>News content</p>
            <hr/>
            <p>
                <span>2021-05-03 00:00:00</span>
                <a href="#">Update</a> / 
                <a href="#">Delete</a>
            </p>
        </li>
    </ul>
</body>
</html>

再同樣的資料夾位置再新增一頁form.php 貼上以下HTML Code

<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Add News</title>
    <style>
        form{
            display: flex;
            flex-direction:column;
            width: 50%;
            margin: 0 auto;
        }
        @media (max-width:750px){
            form{
                width: 90%;
            }
        }
        input,textarea{
            margin: 10px 0;
            font-size: 20px;
            font-family: Arial, Helvetica, sans-serif;
        }
        input[type='submit']{
            background: cornflowerblue;
            border: #333 1px solid;
            padding: 10px;
        }
        input[type='submit']:hover{
            background-color: deepskyblue;
        }
    </style>
</head>
<body>
    <form action="" method="post">
    <label for="title">title:</label>
    <input type="text" name="title">
    <label for="content">content:</label>
    <textarea name="content" id="" cols="30" rows="10"></textarea>
    <input type="submit" value="submit">
    </form>
</body>
</html>

以上的list.php 為本次最新消息的列表頁,而form.php 則為本次負責新增最新消息的表單頁。我已經有做好一個很基本的前台頁面畫面,包含一個非常簡單的RWD,建議採用Chrome瀏覽器瀏覽,讓你可以專心在學習CodeIgniter上,因為CodeIgniter採用MVC架構,即Model、View、Controller 分離式架構,所以這兩頁前台的靜態頁就隸屬於View的範疇,故需要放在app/view 之下。

step3. Mysql或MariaDB資料庫

為了可以讓你專注在CodeIgniter學習上,我們先把資料庫處理好,所以麻煩你開啟你的資料庫管理介面,通常是使用 phpmyadmin,你可以使用你熟悉的界面。

建立一個新資料庫,取名news(或你喜歡的名字),編碼採用utf8mb4_general_ci,然後按下新增。新增完資料庫之後我們需要接著新增資料表,資料表的命名也可以叫做news(或你喜歡的名字),欄位數為5欄,第一欄為id int(11)並勾選AUTO_INCREMENT(A_I),主要放置文章編號,採用數字最多11碼,勾選AUTO_INCREMENT會自動以流水號方式產生,並且記得將id設定成主鍵。第二欄為title varchar(255) ,放置文章標題,採用變動型字元串最多255個字元。第三欄是content text,為放置文章內容之欄位採用純文字欄位。第四欄是insertTime datetime,設定CURRENT_TIMESTAMP,放置文章建立的年月日時分秒。第五欄是update-time datetime,設定CURRENT_TIMESTAMP,放置更新文章的年月日時分秒。如果你採用phpmyadmin,那你設定的方式會與下圖相同,然後既然按下右下角的Save。

如果你在這裡儲存遇到問題,可以先取消第一欄為id int(11)的AUTO_INCREMENT(A_I)的勾選,先儲存並將id int(11) 設定爲主鍵之後在回來設定id int(11)的AUTO_INCREMENT(A_I)的勾選。

News table 的 sql 設定
勾選id 設定主鍵

如果你真的對sql設定有很大的困擾,在phpmyadmin後台找到sql指令頁,然後透過複製以下sql指令到sql指令頁上執行,可以幫助你暫時跳過這一個環節。

CREATE TABLE `news` (
  `id` int(11) UNSIGNED NOT NULL AUTO_INCREMENT PRIMARY KEY,
  `title` varchar(255) NOT NULL,
  `content` text NOT NULL,
  `insertTime` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP,
  `updateTime` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

step4. 設定連接資料庫

連接資料庫設定請打開app/datebase.php,填上資料庫的hostname、username、password與database。hostname通常都是localhost,而username與password通常本機環境預設值都是root,或是username是root但密碼保留空白,而database就是指資料庫名稱,這裡請填上news 或你剛剛設定的資料庫名稱。請注意,這裡是填寫資料庫名稱,而不是資料表名稱喔!

database config

step5. 建立MVC的C,create的部分

前往app/Controllers,打開Home.php複製裡面的程式碼,接著在app/Controllers資料夾中新增一頁News.php,貼上剛剛複製的程式碼,然後將第五行的Home改成News後儲存。請注意,這裡的檔名與function名稱的News的N一定要大寫,也就是首字要大寫,不然程式會出錯,至於為什麼要大寫,我只能說這是CodeIgniter的規定,我如果沒有記錯是為了區分class與function名稱的緣故,所以無論如何請記得大寫,後續Model的部分也是同樣的首字要大寫喔。

在News.php中,複製一個function index()並貼在function index() 下方,並把index改成create,然後回到function index(),將裡面的「return view('welcome_message');」改成「return view('list');」,如此一來當我們打開 http://localhoat/news/ 時,預設就會執行function index() 的內容,程式就會回傳 list 這個view 給瀏覽器,於是你就會看到列表頁的內容了,瞭解基本的function index()結構後,我們要從新增文章內容做起,之後在Read階段時我們會在回來這裡。

將function create() 裡面的內容「return view('welcome_message');」刪除,改成以下內容:

       //if form submit
       if($_POST){
            $model = new NewsModel();
            $model->save([
                'title' => $this->request->getVar('title'),
                'content'  => $this->request->getVar('content')
            ]);
            return redirect()->to(base_url('news')); 
        }else{
            return view('form.php');
        }

上面的程式碼是在說,如果表單有用post的方式送資料過來,那要調用NewsModel(),然後將title、content的資料存到model裡,存好返回list列表頁,如果表單沒有用post的方式送資料則顯示form.php的頁面內容。這裡我們有調用NewsModel(),所以我們要在整個class News()之前招喚NewsModel(),所以要寫上「use App\Models\NewsModel;」,以下是我目前News.php的全部樣子,紅框部分為本步驟所新增的範圍。

News index 與 create 的 controller

step6. 建立MVC的M

由於我們剛剛招喚了NewsModel(),但我們還沒有建立這個Model,所以前往資料夾app/Model,建立NewsModel.php,輸入以下程式碼:

<?php

namespace App\Models;

use CodeIgniter\Model;

class NewsModel extends Model
{
    protected $table = 'news';
    protected $allowedFields = ['title', 'content', 'insertTime','updateTime'];
}

以上程式碼的大意是,namespace命名空間採用App的Models,使用CodeIgniter的Model功能,建立一個class叫NewsModel作為Model功能的延伸,資料表名稱是news,要使用的欄位有title、content、insertTime與updateTime四個欄位。

step7. 測試Create 新增功能

到這裡你就可以開啟你的網站,例如http://localhost/news/create,你就可以測試你的表單資料有沒有正常送出到資料庫了,因為送出後沒有做提示訊息,所以麻煩請到資料庫確認你的資料有進去news資料表中。

然後由於我們新增的部分已經做好了,所以你可以前往view將list.php中,第37行改成以下程式:

<a href="<?= base_url();?>/news/create">Add News</a>

如此一來就可以從列表頁連到表單頁了。

step8. 檢查資料庫與下載本文程式碼

如何檢查你是否有跟是本篇文章,完成教學的內容?你只需要前往資料庫,瀏覽資料庫裡面的資料即可!

News 資料表中的資料

你會在資料表中看到你在create form中輸入的內容,id會是流水編號,title、content 會是你輸入的資料,insertTime與updateTime會是資料庫自動產生的時間,只要這些欄位有正常儲存進資料庫,就代表你完成本篇教學的內容了。如果你想下載本篇文章的程式碼,請按此下載。

[Python][Django] 安裝Django發生pip command not found

最近因為放假,看了馬克祖伯茲自己開發數位管家之後,還蠻有趣的,其中有說到開發的過程中有用PHP與Python,而Python在寫爬蟲、抓取資料時好像還蠻好用的,最重要的事我最近看了樹莓派機器人RAPIRO,是可以用Python去編寫程式,所以就想說抽空花一點時間學一下Python,再加上公司需要一個發票與合約管理系統,所以變成我除了看Python以外,也要學一下Django了。

當然第一步就是就是要在安裝Django,在How to install Django的頁面上寫了可以使用command line "pip install Django==1.10.4" 做安裝,可是在我輸入終端機之後卻發生command not found,發現是我的電腦沒有pip指令的樣子?這有點怪,因為安裝Python3.5之後,應該會自動安裝pip,既然現在沒安裝只好手動安裝了,所以下了command line "sudo easy_install pip",確定pip安裝完成後,我也可以用Django了,簡單記錄一下這個問題的解決方式。

[經驗]在Mac os 10.8中安裝Ruby on Rails及資料庫

從去年開始一直不斷的有想嘗試Ruby on Rails的衝動,但是奇怪的是不管怎麼setting環境都會出現error,最後只好無疾而終,像這樣的情況前前後後發生的次數已經是一隻手指頭可以數出來的。有鑒於本人的記憶力真的出奇的差,所以就來寫一份安裝過程的筆記吧!

原則上大部份的動作都跟ihower的安裝Rails開發環境Mac版差不多,但是有點些微不同,畢竟時間跟文章內容有點落差,科技進步神速的情況下,版本也會有些微落差,以下就來分解動作一下囉!

  1. 安裝Xcode,並使用Xcode安裝Command Line Tools。

    Command Line Tools位於Xcode左上角選單>Preferences>Downloads。

  2. 打開終端機Terminal,安裝homebrew管理相關套件。 $ ruby -e "$(curl -fsSkL raw.github.com/mxcl/homebrew/go)"
  3. 安裝最新版GIT,並將版本切換至新安裝之GIT版本,檢查目前使用的GIT版本是否為新安裝版本。Mac本身就有內建GIT,在10.8中內建的是1.7.12.4版本 $ brew install git
    $ export PATH=/usr/local/git/bin:/usr/local/sbin:$PATH
    $ git --version
  4. 安裝SQLite資料庫 $ brew install sqlite
  5. 安裝Ruby,並將版本切換至新版,並檢查目前使用的Ruby版本是否為新版。 $ brew install ruby
    $ echo 'export PATH=/usr/local/Cellar/ruby/2.0.0-p0/bin:$PATH' >> ~/.bash_profile
    $ export PATH=/usr/local/Cellar/ruby/2.0.0-p0/bin:$PATH
    $ ruby -v
    紅字部分請替換成Ruby的版本號。

以上,到這邊Ruby跟GIT的安裝就大功告成了,接著就是要安裝Rails的部分了。

  1. 安裝SQLite的Adapter $ gem install sqlite3 --no-ri --no-rdoc
  2. 安裝Rails $ gem install rails --no-ri --no-rdoc

到這邊就完成了Ruby on Rails環境了,但是如果資料庫的部分不想使用SQLlite想用PostgreSQL怎麼辦?最簡單的方式應該是下載Postgres.app,下載之後只要點擊兩下就可以立即啟動PostgreSQL,Postgres.app啓動後會在出現在右上角,點擊後會出現下拉選單,像是說明文件(Documentation)或打開PSQL終端界面都可以在這裡找到。

簡單說明一下建立資料庫與刪除資料庫部分,這些部分在明文件(Documentation)都有說明,但是為了避免有朋友看不太懂,所以稍微提一下:

  1. 打開psql ,選擇Postgres.app中的Open psql 。
  2. 建立資料庫請輸入CREATE DATABASE 資料庫名稱;
  3. 刪除資料庫請輸入DROP DATABASE 資料庫名稱;

如果需要圖形化界面協助操控,可以使用pgAdmin,預設連線方式當然是本地端的localhost,帳號會跟你在Mac上的使用者名稱相同(如果還是不知道就open psql然後看最後一行在“=#”前面的部分就是帳號),預設密碼為空,如果想要複雜一點,來個自行安裝可以參考這篇文章

最後在Ruby部分,可以安裝Ruby tool pg:

$ gem install pg --no-ri --no-rdoc
如果還是喜歡使用mysql也沒關係,可以安裝Ruby tool mysql2:

$ gem install mysql2 --no-ri --no-rdoc
或是mysql:

$ gem install mysql --no-ri --no-rdoc
更多的ruby工具可以參考The Ruby Toolbox,希望下次我自己在安裝的時候可以跟今天一樣順利。