laravel + vue 基本使用方式

這篇是以 laravel 5.4 之後的環境為主.

laravel 5.x 開始內建對 vue 的支援, 5.5 內建對 react 的支援, 並提供 artisan 指令切換不同的 framework.
而 laravel 5.4 之後,  打包使用的工具從 elixir 改成 mix (webpack) , 所以查資料時, 會看到兩種不同流程的文件, 在於 laravel 版本不同的關係.

基本使用方式

這篇文章 對於 laravel 5.4 裡使用 vue 已經很清楚了, 不過我還是簡單筆記一下重點及遇到的問題

1. 更新 node 到最新版, 並且在 laravel project 下安裝相關 node package

   sudo npm install -g n
   sudo n latest
   npm install

2. add vue file under resources/assets/js/components
   例如新增 login.vue
3. edit resources/assets/js/app.js , 把上面的 vue 檔案加入設定, 例如

   Vue.component('login', require('./components/Login.vue'));

4. 執行指令打包 javascript file 到 public/js/  下
   npm run dev

然後就可以在 html  裡, 以  <login></login> 把 login.vue 的內容引入.

如果要把一些共用的 package 分開來不要打包到一起, 可以修改 webpack.mix.js,  設定要分開打包的 package, 例如

.extract(['lodash','jquery','axios','vue'])

就會額外再產生兩個 js file ,  manifest.js 和 vendor.js

補充上面第 1 點,  在 ubuntu 預設 nodejs 套件版本太舊, 因此在執行 npm install 時, 會產生一些問題.  因為對 node 不熟, 浪費了一些時間處理,  最後發現直接更新到最新版就完全不會有這些問題.  不過用這種方式更新 node 的話, 會安裝在 /usr/local/n/versions/node/  下, 使用 node 時就不是用 ubunut 的 nodejs 套件的檔案了.

較完整應用示例

這篇文章 有更完整的應用示例,  除了 php 的部份外, 還使用了 vue-router 和 vue-axios 兩個 package.

vue-router 可以看 這篇文章 , 中間有的動圖可以很容易看懂 vue-router 的功用, 也是一份寫的很清楚的使用教學.

vue-axios 是  vue 使用 ajax 的 package, 可以看 這篇文章

[PHP] 使用 composer 管理自行開發中的套件

使用 composer 管理 php 套件, 遇到要自行開發的套件, 又不想上傳到 github 公開,  也不想自建一個 repo 那麼麻煩時, 可以透過以下方式進行.

假設環境如下:

1. 網站根目錄為  /var/www/mysite
2. 自行開發套件的路徑為  /var/www/mypackage
3.  套件名稱為 duan/firstpackage
4.  一個名稱為 mylog 的 class

[更新] :
原本設定方式還是要透過 git 方式來加入自己開發的套件, 而不是直接使用本機 (local file) 上的套件檔案.
正確做法應該是將 compoeser 裡的 repo 設定改為 path , 這樣就可以加上 symlink 參數, 產生 symbolic link. 這樣直接修改套件內容就會直接產生效果, 對於開發中的套件會方便許多. (原本方式要在修改後更新到 git , 然後在引用套件的地方跑一次 composer update 才會從 git 取出來更新 vendor 下的套件檔案).

[修正後的 composer.json 內容]
更新 compoer.json 的內容如下 (只列出 repo 的部份, 其它照舊)

"repositories": [{
    "type": "path",
    "url": "/var/www/piiplib/piiplib",
    "options": {
        "symlink": true
    }   
}]

[修正前的流程]

處理流程大致如下
1. 到 /var/www/mypackage 建立 composer.json (例如用 composer init )
    然後修改內容大致如下 (以 follow PSR 4.0 來說)

{
    "name": "duan/firstpacakge",
    "description": "my first pacakge",
    "license": "MIT",
    "authors": [
     {
           "name": "duan",
           "email": "duan@example.com"
     }
     ],
    "require": {},
    "require-dev": { },
    "autoload": {
        "psr-4": {"Duan\\Firstpackage\\": "src"}
    }
}

2. 在 /var/www/mypackage 建立以下路徑  src tests 後, 執行 composer update

3. 在 /var/www/mypackage/src 下建立檔案 Mylog.php
    namespace 為 Duan\Firstpackage


4. 對  /var/www/mypackage 做套件管理 (git)
a.  git init
b.  edit .gitignore , 加入  /vendor 和 composer.lock
c.  git add .
d.  git commit -a -m "some description"

5. 到 /var/www/mysite 下, 在 composer.json 加入以下內容

 "require": {
     "duan/firstpackage": "dev-master"
  }
 "repositories": [{
     "type": "vcs",
     "url": "/var/www/mypackage",
 }]

6. 在 /var/www/mysite 執行 composer update


沒錯誤的話, 在 /var/www/mysite/vendor/  裡, 應該會複製了一份  /var/www/mypackage commit 在 git 裡的內容到   /var/www/mysite/vendor/duan/firstpackage 路徑下

這時候要使用時, 依 composer autoload 的方式就可以使用了, 例如

require_once "/var/www/mysite/vendor/autoload.php";
use Duan\Firstpackage\Mylog;
$log = new Mylog;

參考資料
http://culttt.com/2014/05/07/create-psr-4-php-package/

Laravel 筆記 - 安裝問題排除

安裝環境 ubuntu(1704) + apache(2.0+) + php (7.0+) + laravel (5.3+)

依 Laravel 官網建議方式安裝後, 可能還會遇到以下問題

1. apache 的 config file 需要設定在 laravel 的 public 有以下權限

AllowOverride All

否則從 Apache Log 可以看到 .htaccess: Options not allowed here 錯誤


2. laravel 目錄下的  storage  及其子目錄需要 web server owner 有讀寫權限, 否則會產生 http code 500 回應

3. 如果 apache module rewrite 沒有開啟, 在 ubuntu 可以下指令
sudo a2enmod rewrite


在很多情況下,  不是用  Laravel 架整個 web , 例如首頁是用 wordpress , 然後在其間用 laravel 架設其他需要的功能.

假設 wordpress 裝在  /var/www/wordpress ,  http://my.site/
laravel 裝在 /var/www/laravel
然後希望  http://my.site/mysite/  看到 laravel 架設的網站, 作法如下

1.  cd /var/www/wordpress;  ln -sf /var/www/laravel/public  mysite
2.  修改 apache config file ,  要把 directory 設定改為

AllowOverride All



這時瀏覽 http://my.site/mysite 就可以看到 laravel 預設的首頁了