摘要：最近上看見了大漠的項(xiàng)目，看到說準(zhǔn)備做一個(gè)首頁，于是我的第一想法就是做一個(gè)列表頁面，文件可以很容易的生成一個(gè)文件。對(duì)于不確定的情況下，我們不表明具體的協(xié)議，使用。

最近上Github看見了大漠的DemoHouse項(xiàng)目，看到Issues說準(zhǔn)備做一個(gè)首頁，于是我的第一想法就是做一個(gè)md列表頁面，md文件可以很容易的生成一個(gè)html文件。剛剛做好腳本文件，可以生成list.md。隨后提了pr。同時(shí)看到 @jerexyz 使用gulp構(gòu)建工具做好了一個(gè)生成index.html的工具，我也就暫時(shí)放棄了繼續(xù)后面的工作，還好沒做，繼續(xù)做的話生成出來的也比較粗糙，還得再繼續(xù)美化修改。想象一下，如果這時(shí)我新收集了一個(gè)Demo，準(zhǔn)備提交版本庫，我是不是還得先執(zhí)行一下命令 node index.js 然后再添加暫存區(qū)，提交版本庫，推遠(yuǎn)程。如何省略執(zhí)行命令行這一句呢？

說到鉤子，不知道大家喜歡釣魚嗎？喜歡不喜歡應(yīng)該都知道魚鉤，不知道的再看一下，魚鉤長(zhǎng)這樣的。

這是有一期我愛發(fā)明里面介紹的，一個(gè)釣魚狂熱愛好者發(fā)明的釣魚神器，看節(jié)目似乎很有效。通常我們見到的魚鉤就只是上半部分，這里卻多了一個(gè)小鉤，其實(shí)他就是我們這里準(zhǔn)備學(xué)習(xí)的hook。

為了達(dá)到某種效果，我們添加的一個(gè)腳本，在正常流程執(zhí)行的時(shí)候觸發(fā)這個(gè)腳本（個(gè)人拙略，如有偏頗忘指出）。

git的鉤子存放在 .git/hooks 目錄下，git init 時(shí)會(huì)自動(dòng)生成一些示例腳本在該目錄下，腳本都是 .simple 后綴結(jié)尾，如果需要使用的時(shí)候，重命名取消后綴即可。

這里是希望在存入版本庫之前生成列表頁，查詢文檔發(fā)現(xiàn) pre_commit 是在 鍵入提交信息前運(yùn)行 。

git add demo => pre_commit => git add list.md => git commit -m "add new demo and update list.md"

pre_commit 是一個(gè)腳本文件，由于nodejs寫好了一個(gè)腳本文件，于是添加了一個(gè)頭部，然后最后添加生成的list.md到暫存區(qū)間

git add demo => git commit -m "add new demo and update list.md"

實(shí)際上我們的操作流程就變成如上描述的樣子。這個(gè)就是正常流程，git commit 命名回車后先執(zhí)行的是 pre_commit 腳本，再存入版本庫

自動(dòng)生成list.md的工作到這里就完成了，更多的鉤子文件這里暫時(shí)不繼續(xù)擴(kuò)展了。
又看到還有一個(gè)需求就是為每個(gè)demo添加一些其他信息，例如：分類/作者等信息。這樣 @jerexyz 的項(xiàng)目工具怎么修改實(shí)現(xiàn)一下呢，或者說其他方案怎么實(shí)現(xiàn)呢？

參考 @jerexyz 的想法與 大漠 的思路，如果要配置多項(xiàng)信息我想就是在每個(gè)demo下配置一個(gè)config.json文件靠譜一些。
或者像 @jerexyz 提出的直接title添加分類，方法也行，這樣存在修改index.html文件，還有就是配置信息多或者后期再增加修改就沒有配置文件方便直觀。如果在原來的工具的基礎(chǔ)上修改的話就需要生成幾個(gè)也買你，把分類數(shù)據(jù)統(tǒng)計(jì)出來，然后再為每個(gè)分類數(shù)據(jù)生成一次頁面，最后相互調(diào)用。是不是有一種其他的方法來處理呢？恰巧最近又在學(xué)習(xí)vue，于是就準(zhǔn)備嘗試一下。一個(gè)單頁就可以搞定，不需要每次更新前端頁面，只需要更新后端數(shù)據(jù)文件db.json即可。

在vue還是版本號(hào)1打頭的時(shí)候看過文檔，沒有實(shí)際做過demo，后面自然而然還是只能對(duì)著文檔編碼。
一開始我是直接script編譯好的vue.js文件，然后實(shí)例化vue。也就是這樣子的

    # index.html 中這樣引入vue
    

    # scirpt 標(biāo)簽中這樣實(shí)例化，純純的文檔風(fēng)
    var vm = new Vue({
        el: "#id",
        data: {
            message: "阿彌陀佛"
        }
    })

這樣子沒毛病，沒有任何問題。但是對(duì)于招牌需求這個(gè)構(gòu)建工具那個(gè)構(gòu)建工具，還是要摸索學(xué)習(xí)學(xué)習(xí)。于是又決定嘗試一下也只是停留在文檔風(fēng)的webpack。選擇它也是有原因的，因?yàn)槲抑匾暬A(chǔ)也更風(fēng)啊，哈哈哈～

這里是寫在vue2.0.0的RC版本

創(chuàng)建項(xiàng)目目錄（這里其實(shí)也跟風(fēng)的玩了一下yarn，但是并沒太多感受理解它的優(yōu)秀，不做描述）

    npm i vue-cli -g
    vue init webpack demo
    cd demo
    npm i
    npm run dev

自動(dòng)啟動(dòng)瀏覽器打開 http://localhost:8080 頁面，展示一個(gè)vue的初始模板頁面

列表頁組件
不會(huì)從頭到尾手寫，還不會(huì)修改嗎？由于暫時(shí)需要實(shí)現(xiàn)的就是一個(gè)列表，想到的就是 v-for="demo in demos"

    # 入口文件main.js中引入了app.vue組件

    # app.vue組件中包含了這里我們需要修改的list.vue

    # list.vue 
    /**
     * 組件的三個(gè)部分（html+js+css），如果描述感覺vue就簡(jiǎn)單了好多
     * template（html或者是自定義標(biāo)簽）
     * script （js）
     * style （css）
     */
    

    

    

需要注意的一點(diǎn)是這里的data是一個(gè)函數(shù)，組件內(nèi)的data都是函數(shù)的形式，至于為什么還沒去理解，先學(xué)會(huì)第一步如何使用。其實(shí)你寫成了對(duì)象形式，在開發(fā)者工具會(huì)輸出提示。

導(dǎo)入數(shù)據(jù)
準(zhǔn)備了一個(gè)數(shù)據(jù)文件db.js，修改之前生成列表的工具，把每個(gè)demo下的配置文件讀取出來追加到db.js中。

    # 以下代碼位于template中
    
 {{demo.category}} 
    # li標(biāo)簽需要修改一下，如果newDemos存在，按照newDemos的分類數(shù)據(jù)輸出
    
 {{ demo.title }} 

    # 以下代碼位于script中
    # 導(dǎo)入db.js
    import demos from "./db"

    data: function() {
        return {
            demos: demos,
            newDemos: ""
        }
    }

    # 如果要分類顯示呢
    # 添加一個(gè)方法
    methods: {
        getCategoryDemos: function(e) {
            var newDemos = [];
            this.demos.forEach(function(demo) {
                if(demo.category === e.target.dataset.category) {
                    newDemos.push(demo);
                }
            })
            this.newDemos = newDemos;
        }
    }

顯示全部
上面取巧式的把分類數(shù)據(jù)實(shí)現(xiàn)了，如果要顯示全部呢？即回到首頁。把newDemos的值設(shè)為空不就好了嗎？數(shù)據(jù)綁定的好處就是這里吧，監(jiān)控?cái)?shù)據(jù)的變化重新渲染。

    # 添加template    
    
 Home 

    # 添加method
    showAll: function() {
        this.newDemos = "";
    }

預(yù)覽demo
預(yù)覽demo即在列表頁面添加iframe標(biāo)簽引入demo靜態(tài)頁面。默認(rèn)是不顯示的，如果添加了一個(gè)判斷語句 v-if

    # template add iframe
    

    # script 
    # data中添加isShow 
    data: function() {
        return {
            // 新增
            isShow: false
        }
    }

    # method中添加showAll
    method: {
        // 新增
        showAll: function() {
            this.isShow = true;
        }
    }

iframe https

page是https協(xié)議，iframe的資源可能是http，也可能是https。對(duì)于不確定的情況下，我們不表明具體的協(xié)議，使用 // 。（不擴(kuò)展討論其它問題）

URI 是https協(xié)議，iframe src是http協(xié)議
Mixed Content: The page at "https://domain.dev" was loaded over HTTPS, but requested an insecure stylesheet "http://domain.dev". This request has been blocked; the content must be served over HTTPS.

URI 是http協(xié)議，iframe src是https協(xié)議
均正常加載訪問，iframe請(qǐng)求地址是https協(xié)議。

URI 是https協(xié)議，iframe src是https協(xié)議

URI 是http協(xié)議，iframe src是http協(xié)議

開源協(xié)議與開源精神
截止昨晚22點(diǎn)左右，幾位國(guó)外的開發(fā)者在 漠大 的repo下開了issue，討論關(guān)于項(xiàng)目是否不應(yīng)該存在，或者說是不是不應(yīng)該拷貝其它平臺(tái)（codepen，Codrops …）上的內(nèi)容在github備份一份。

觀點(diǎn)一 原創(chuàng)
國(guó)外：重視原創(chuàng)。對(duì)于原創(chuàng)的作品的保護(hù)或者尊重，我們是不是不應(yīng)該在其它位置備份別人的作品，而沒有署名源作者的版權(quán)信息（其實(shí)這一步是準(zhǔn)備做，或者說是還沒來得及做，但是考慮到的）。只是沒想到國(guó)外的開發(fā)者對(duì)于原創(chuàng)的重視，還有在Twitter上發(fā)推討論，雖然也就那么幾個(gè)人在討論，但其中不乏也有Codrops的開發(fā)者。

國(guó)內(nèi)：太多的技術(shù)類型的網(wǎng)站，除了作者自己主動(dòng)分發(fā)。更多的還是爬蟲抓取，最后抹去源作者的信息，也不注明來源出處。最后不得不說讓源作者的原創(chuàng)不能得到很好的保護(hù)，還造成了很多垃圾水文的存在。

觀點(diǎn)二 加源保持最新
很多作者會(huì)一直更新自己的項(xiàng)目，但是我們通常只是拷貝了一份最初的版本，如果有升級(jí)更新，通常我們都不能使用到最新的內(nèi)容。還會(huì)覺得怎么參考的文章有錯(cuò)誤，其實(shí)不然，是被抓取出來的沒有及時(shí)更新。

觀點(diǎn)三 網(wǎng)絡(luò)問題
國(guó)外開發(fā)者也知道中國(guó)的問題，其實(shí)這是讓我覺得有些可悲的，網(wǎng)絡(luò)始終是病。當(dāng)問及codepen是否能訪問的時(shí)候，我說的不能，因?yàn)檫@個(gè)網(wǎng)絡(luò)不穩(wěn)定，常常是不能直接訪問的，所以我們常常收藏一些好的例子，以備不時(shí)之需，但最后卻始終是覺得國(guó)外的做的好。國(guó)內(nèi)的好作品怎么搜集起來，怎么讓他能夠在trending上持續(xù)排第一，得到不止國(guó)內(nèi)開發(fā)者的肯定。

雖然我也只是一個(gè)渣渣，但是我也有夢(mèng)想，希望可以更多的提升自己，參與開源，對(duì)于原創(chuàng)的保護(hù)以及鼓勵(lì)希望更多的人能夠重視并自律參與，對(duì)于源進(jìn)行物質(zhì)的鼓勵(lì)或者說行為上允許后再進(jìn)行轉(zhuǎn)載。這路應(yīng)該還很長(zhǎng)…