《H5+移動應用實戰開發》已出版

《H5+移動應用實戰開發》終於出版了，最近在忙著Vue和Webpack相關的前端書籍寫稿。本書面向的讀者為：從後端轉前端，或零基礎開始學習移動端開發的人。前後端完全分離的開發方式越來越成為一種趨勢，下一本書，將是專業前端書籍，是關於Vue在實際工作中的單頁應用開發，涉及到Vue全家桶以及webpac ...

　　《H5+移動應用實戰開發》終於出版了，最近在忙著Vue和Webpack相關的前端書籍寫稿。本書面向的讀者為：從後端轉前端，或零基礎開始學習移動端開發的人。前後端完全分離的開發方式越來越成為一種趨勢，下一本書，將是專業前端書籍，是關於Vue在實際工作中的單頁應用開發，涉及到Vue全家桶以及webpack相關技術。

京東：https://item.jd.com/12521607.html

噹噹：http://product.dangdang.com/27864696.html

天貓：H5+移動應用實戰開發

　　書中Demo部分界面

DIV高度設置全屏

html：

<div class="full"></div>

css：

.full{ height:100%; position:fixed; }

在有dom結構變更的情況下，mui.back要點擊2次才能回退成功

於是我調用了2次back方法，而且第二次調用延時了

            mui.init();
            var old_back = mui.back;
            mui.back = function() {
                mui.confirm('完工內容未提交，確認離開嗎？', '離開確認', btnArray, function(e) {
                    if(e.index == 1) {
                        //執行mui封裝好的視窗關閉邏輯；
                        old_back();
                        setTimeout(function () { old_back() }, 300);//解決回退不了的問題
                        console.log('sltImgCount:' + sltImgCount)
                    }
                });
            }

CSS透明度的問題

在設置div的透明度的時候發現設置了父div的透明度（opacity=0.5），子div的透明度也隨著改變了，並且設置子div的透明度不起作用，這種情況下可以使用rgba來設置父div的透明度：例如設置div黑色半透明，可以設置div的background:rgba(0,0,0,0.5)

This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.

這是引用組件時，路徑大小寫不對導致的

關於Vue-cli npm run build生產環境打包,本地不能打開問題

問題：

Tip: built files are meant to be served over an HTTP server.

Opening index.html over file:// won't work.
解釋：

npm run dev是開發環境, npm run build是生產環境, 在開發環境完成代碼和測試, 之後用生產環境生成代碼,執行npm run build 命令後，會生成dist目錄，裡邊包含index.html和static文件夾。

npm run build的時候, 一開始就會提示Built files are meant to be served over an HTTP server. Opening index.html over file:// won't work., 在vue-cli的預設配置中, 把assetsPublicPath: '/'改成assetsPublicPath: './',dist文件夾里的文件必須放在伺服器的根目錄, 如果你想本地打開的話, 可以在npm run build完成之後執行以下命令:

npm install -g http-server // 該命令只需執行一次, 安裝過之後, 以後就不需要重覆安裝了

再運行：hs

原文：https://blog.csdn.net/zx_p24/article/details/80360312

vue 單文件樣式寫了scoped 不能覆蓋框架原有樣式的解決辦法

方法一

vue 單文件樣式寫了scoped 不能覆蓋框架原有樣式的解決辦法

在vue 裡面<style scoped></style> 是為了讓樣式隻影響本身自己組件的樣式，不改變全局的樣式。

但是存在一個問題組件框架的ui樣式沒辦法覆蓋。

解決辦法：在vue 文件裡面寫兩個style 樣式

例如

<style>

///全局的

//全局的這個一定要在要覆蓋的ui樣式之前，在包裹上一層，這樣就不會影響別的組件的樣式

</style>

//私有的

</style>

全局和私有的style 的順序一定不能變，全局的在最前面，私有的在後面

引用：https://www.cnblogs.com/daiwenru/p/9913179.html

方法二

/deep/ .el-table .red-row {
background: #ffc2c2;
}
or
 .el-table >>> .red-row {
background: #ffc2c2;
}

引用：https://blog.csdn.net/p930318/article/details/82767401

安裝cnpm

因為npm安裝插件是從國外伺服器下載，受網路影響大，可能出現異常，如果npm的伺服器在中國就好了，所以我們樂於分享的淘寶團隊幹了這事。！來自官網：“這是一個完整 npmjs.org 鏡像，你可以用此代替官方版本(只讀)，同步頻率目前為 10分鐘一次以保證儘量與官方服務同步。”；

官方網址：http://npm.taobao.org

安裝：命令提示符執行註意：安裝完後最好查看其版本號cnpm -v或關閉命令提示符重新打開，安裝完直接使用有可能會出現錯誤；

註：cnpm跟npm用法完全一致，只是在執行命令時將npm改為cnpm（以下操作將以cnpm代替npm）。

npm安裝stylus和stylus-loader

去到 package.json dependencies 裡面隨便找個地方加上下麵這兩句話

    "stylus-loader": "^3.0.1",
    "stylus": "0.52.4",

然後去 cmd 運行

cnpm install (npm install 一樣的我用了淘寶鏡像)

Error:Cannot find module 'stylus'

在webpack 裡面用了 stylus-loader，但npm instatll 沒有正確安裝，出現error： Cannot find module ‘stylus’。

解決辦法：
重新npm install stylus 和 stylus-loader

npm install stylus –save-dev
npm install stylus-loader –save-dev

npm太慢，淘寶npm鏡像使用方法

安裝vue-cli

官網地址：https://github.com/vuejs/vue-cli

Git中的bash與CMD的區別

　　Windows在使用git工具時，可以看到有兩個命令輸入窗：

　　　　　1. Git CMD

　　　　　2. Git Bash

　　兩者的區別：Bash是基於CMD的，Bash在CMD的基礎上新增了一些命令和功能，故建議使用Bash更方便。

　　Git GUI 是一個圖形操作頁面。

《H5+移動應用實戰開發》已出版

目錄

書中Demo部分界面

DIV高度設置全屏

在有dom結構變更的情況下，mui.back要點擊2次才能回退成功

CSS透明度的問題

This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.

關於Vue-cli npm run build生產環境打包,本地不能打開問題

vue 單文件 樣式寫了scoped 不能覆蓋框架原有樣式的解決辦法

方法一

方法二

安裝cnpm

npm安裝stylus和stylus-loader

Error:Cannot find module 'stylus'

Git中的bash與CMD的區別

　　書中Demo部分界面

vue 單文件樣式寫了scoped 不能覆蓋框架原有樣式的解決辦法