cms php vue 開源_18919938190

#這是一個NB的項目

##牛不牛逼，用心去感受，每一行代碼中的詩情雅意

###我們是有靈魂的程式員，是以，我們的代碼富有詩意；

##主流開源協定之間有何異同？

##用(傳統方式)指令行把修改過後的代碼上傳到碼雲??

git add

git commit -m "送出資訊"

git push

##制作首頁 App元件

1.完成 Header 區域，使用的是 Mint-UI 中的 Header元件

2.制作底部的 Tabbar區域，使用的是 MUI 的 Tabbar.html

在制作購物車的小圖示的時候，操作會相對多一些：

先把 擴充圖示的 css 樣式，拷貝到項目中

拷貝 擴充圖示的 ttf 檔案，到項目中

+為購物車 小圖示，添加如下樣式 mui-icon mui-icon-extra mui-icon-extra-cart

3.要在 中間區域放置一個 router-view來展示路由比對到的元件

##改造 tabbar 為 router-link

設定路由高亮

點選 tabbar,中的路由連結，展示對應的路由元件

##制作首頁輪播圖布局

##加載首頁輪播圖資料

擷取資料，使用 vue-resource

使用 vue-resource 的 this.$http.get擷取資料

擷取到的資料，要儲存到 data 中

使用 v-for 循環渲染每個 item 項

##改造九宮格區域的樣式

##改造 新聞資訊 路由連結

新聞資訊 頁面制作

繪制界面

使用 vue-resource 擷取資料

渲染真實資料

實作新聞資訊清單 點選跳轉到新聞詳情

把清單中的每一項改造為 router-link,同時，在跳轉的時候應該提供唯一的ID辨別符

建立新聞詳情的元件頁面， NewsInfo.vue

在路由子產品中，将新聞詳情的 路由位址 和 元件頁面對應起來

實作新聞詳情的 頁面布局 和 資料渲染

單獨封裝一個 commment.vue 評論子元件

先建立一個單獨的 comment.vue 元件模闆

在需要使用 comment 元件的頁面中，先手動導入 comment 元件

import comment from './comment.vue'

在父元件中，使用 components 屬性，将剛才導入 的 comment元件，注冊為自己的子元件

将注冊子元件時候的，注冊名稱，以标簽形式，在頁面中引用即可

擷取所有的評論資料，顯示到頁面中

實作點選加載更多評論的功能

為加載更多按鈕，綁定點選事件，在事件中，請求下一頁資料

點選加載更多，讓 pageIndex++，然後重新調用一下this.getComments() 方法重新擷取最新一樣的資料

為了防止新資料 覆寫老資料的情況，我們在 點選加載更多的時候，每當擷取到新資料，應該讓老資料

調用數組的 concat方法，拼接上新資料

發表評論

把文本框做雙向資料綁定

為發表按鈕綁定一個事件

校驗評論内容是否為空，如果為空，則Toast提示使用者，評論内容不能為空

通過 vue-resource 發送一個請求，把評論内容送出給伺服器

當發表評論ok後，重新重新整理清單，以檢視最新的評論

如果調用 getComments 方法重新重新整理評論清單的話，可能是能得到最後一頁的評論，前幾頁的評論擷取不到

換一種思路：當評論成功後，在用戶端，手動拼接一個最新的評論對象，然後調用數組的

unshift方法，把最新的評論，追加到data中 comments的開頭，這樣，就能完美實作重新整理評論清單的需求

改造圖檔分享 按鈕為路由的連結并顯示對應的元件頁面

繪制圖檔清單元件頁面結構并美化樣式

制作頂部的滑動條

制作圖檔清單

制作頂部滑動條的坑

需要借助 MUI 中的 tab-top-webview-main.html

需要包 slider 區域的 mui-fullscreen類去掉

滑動條無法正常觸發滑動，通過檢查官方文檔，發現這是一個JS元件，需要初始化一下

導入 mui.js

調用官方提供的方式去初始化：

mui('.mui-scroll-wrapper').scroll({

deceleration: 0.0005 // flick減速系數，系數越大，滾動速度越慢，滾動距離越小，預設 0.0006

})

我們在初始化 滑動條 的時候，導入了mui.js，但是控制台報錯 Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them

經過我們合理的推測，覺得可能是 mui.js 中用到了 'caller', 'callee', and 'arguments' 東西，但是，webpack 打包好的 bundle.js中，預設是啟用類的 嚴格模式的，是以，這2者沖突了;

解決方案：1.把 mui.js 中的 非嚴格模式的代碼改掉，但是不現實

2.把 webpack 打包時候的嚴格模式禁用掉;

最終我們選擇了 plan B,移除嚴格模式：使用這個插件去除嚴格模式

babel-plugin-transform-remove-strict-mode

剛進入圖檔分享頁面的時候，滑動條無法正常工作，經過我們認真的分析，發現，如果要初始化滑動條，必須要等 DOM 元素加載完畢，是以，我們把 初始化滑動條的代碼，搬到了 mounted 生命周期函數中。

當滑動條調試 ok 後，發現tabbar 無法正常工作了，這時候，我們需要把每個 tabbar 按鈕的樣式中 'mui-tab-item' 重新改一下名字

擷取所有分類，并渲染分類清單

制作圖檔清單區域

圖檔清單需要使用懶加載技術，我們可以使用 Mint-UI 提供的元件 'lazy-load'

根據'lazy-load'使用文檔，嘗試使用

渲染圖檔清單資料

###實作了圖檔清單的懶加載和樣式美化

實作了點選圖檔跳轉到圖檔詳情頁面

在改造 li 成 router-link 的時候，需要使用 tag 指定要渲染為哪種元素

實作詳情頁面的布局和美化，同時擷取資料渲染頁面

實作圖檔詳情中 縮略圖的功能

使用插件 vue-preview 這個縮略圖插件

擷取到所有的圖檔清單，然後使用 v-for 渲染

注意： img 标簽中的class不能去掉

注意：每個圖檔對象中，必須有 w 和 h 屬性

##繪制商品清單 頁面基本結構并美化

##嘗試在手機上 去進行項目的預覽和測試

保證手機可以正常運作

要保證手機和開發項目的電腦處于用一個 WIFI環境中，也就是說，手機可以通路電腦的IP