vue + vue-router + vuex + axios + scss + 其他
基本上都是常用的那一套，vuex在這個專案中用的不是很多，但是我還是不嫌麻煩的用了，其實這個專案本身不是很大很複雜，所以我在這裡使用vuex其實不是很必要，但是想了一下，能用的就直接都用上吧，但大家不要學啊，我這裡主要是為了自己實踐vue的專案開發，所以並不在意麻不麻煩了。直接就用了。
既然整體的技術棧以及確定下來，那麼之後就是組織專案結構了，這一點，其實在我看來還是很重要的，因為專案結構的組織在一定程度上意味著你這個專案的邏輯或者功能的劃分，意味著你對這個專案是如何進行拆分構建的，我覺得這個可以值得我們去花時間研究一下的。我的這個專案的src目錄結構如下（主要就是src目錄）：
大致解釋一下吧：
api：用於存放後台介面請求，裡面存放著axios的配置檔案以及根據邏輯、功能劃分的不同後台介面api介面模組。說完了專案結構，那現在說一說我在專案中，學會了哪些專案實踐方法，也在這裡記錄一下：assets：這個就不用多說了，存放著js，scss，image檔案這些靜態資源檔案
basecomponent：這個是根據vue官方檔案中對於元件描述的一些最佳編寫的，裡面存放一些全域性的功能元件，以base開頭，配合下面的registerbasecomponent.js進行這些基礎元件的全域性註冊，這樣你就可以在專案中任何地方直接使用，而無需重新引入。ps：這一塊的元件和專案業務邏輯沒有任何關聯，在編寫基礎元件時也不要和你的業務邏輯產生任何關聯。
components：這個存放你這個專案中可復用的公共元件，每個專案根據業務的不同會編寫不同的components，而上面的basecomponents則可能復用於每個專案，因為他不和業務耦合。而components則根據每個專案的業務邏輯進行編寫的可復用元件。
service：專案的業務邏輯層，注意，我在api中只是只是處理了資料介面，比如介面錯誤處理，介面返回的統一格式化處理以及一些介面的加密處理（這個專案有**，所以進行了介面資料加密），並沒有將業務邏輯也編寫在api裡面，api只處理介面相關的事宜，而真正使用介面，並處理業務邏輯是在serviec中進行的，根據不同的業務需求，service分為了不同的功能模組，用於處理不同的業務邏輯。他會對不同的介面進行呼叫並處理介面返回的資料，他只對資料層面的業務邏輯進行封裝，而其他的通用功能模組，你可以根據是否會復用編寫至mixins中，或者作為乙個模組編寫至assets的js中。
view：裡面存放著vue的頁面元件，裡面的每乙個元件都是作為專案的乙個頁面存在的，他和下面的router.js這個vue路由中配置進行一一對應的。
router.js：vue路由
空位：例子，導航欄的訊息傳遞解決。
所以，有空不妨自己實現一些元件，雖然看似無用，因為網上有更優秀的元件庫，但是如果出發點不一樣，那結果也會不一樣，如果你是抱著學習，抱著了解元件編寫的思維，為了更好編寫元件的，而不是為了自己寫自己用的，那麼你總會有收穫。
空位：myvue中的readme中的一些最佳實踐。
移動端適配，我這裡使用的是rem，適配方案使用的是乙個flex.js，但是，有時候把，自己寫rem真的有點麻煩，所以，需要乙個將px轉化為rem的postcss編譯外掛程式，也就是postcss-px2rem，還有一點，這個postcss-px2rem外掛程式無法指定忽略一些忽略檔案，比如node_modules中的一些vue外掛程式會自帶css樣式，而且很有可能這個外掛程式使用的是px為單位，那麼如果你把它進行rem轉換了，那大小會變小很多，我就碰到了這個問題，查了一些資料，改為使用乙個叫postcss-px2rem-exclude的外掛程式，這個外掛程式他可以設定忽略哪些檔案不需要進行rem編譯，就可以解決這個問題。
我偶爾發現頁面在真機上可以自由的放大縮小，遂查了一下資料，發現原來是vue生成的meta頭的問題，將原本vue-cil自動生成的適用移動端的meta頭改為如下設定即可：
vue配置的webpack（我用的3.0的cli），預設沒有配置壓縮，所以你需要自行配置壓縮loader來進行壓縮操作。這裡我使用的是image-webpack-loader，在vue-config.js裡面進行配置即可，就和你自己使用webpack配置壓縮時一樣。但是，需要注意的是，你可以使用函式來進行配置這個壓縮（cli支援函式配置），因為壓縮比較耗時，比較慢，你在開發環境就不需要壓縮了，只在生產環境進行壓縮即可。
我在專案結構中單獨使用乙個資料夾來存放mixis物件，用於業務邏輯之間的**復用，其實我在一些可復用的元件之中也編寫了元件之間的components，比如對話方塊元件，對話方塊可能不止一種，有幾種形式，但是他也會有一些公共的方法，比如取消，確定，控制對話方塊的顯示隱藏的屬性等等這些東西，也可以作為乙個mixins，所以mixins不止是在業務邏輯之間使用，元件之間也可以考慮在一些情況下進行使用。
還有，mixins在編寫時，mixins只需要實現自己的職責中的事情就行了，並且如果這個mixins中的一些操作有時需要執行其他的邏輯，比如在完成自身功能後需要做一些其他事，即使這件事真的都不會變，那麼你也很有必要再多編寫乙個函式方法來執行這件事，這樣你可以給使用這個mixins的元件乙個機會，乙個擴充套件其他功能的機會，乙個可以自定義行為的機會，乙個可以重寫這件事的機會，而不是寫死這一段邏輯。
其他的東西
vue-router 切換同乙個路由（只是路由引數改變了，比如params）,然後導致元件復用，頁面不會更新，這個坑也比較場景的，我這個專案主要出現在掃瞄檢視設定資訊那裡，也就是在乙個裝置資訊頁面中掃瞄另乙個裝置，頁面不更新，所以，需要在這個頁面監聽$route的變化，然後重新執行執行一些初始化操作即可。還有乙個就是需要注意的點，那就是使用我提到的移動端頁面滾動外掛程式better-srcoll時，因為這個外掛程式是模擬的滾動條，而不是真正的瀏覽器滾動條，所以，vue-router的滾動功能沒有效果的，需要你自行設定better-srcoll的滾動位置。
安卓的頁面的input在獲取焦點時，導致頁面整個window視窗變小，從而 可能會使input被覆蓋或者被頂上去。（具體要看布局）反正，這不是我們想要的，那改如何解決呢？一般我們是使用監聽window.resize來進行處理的，因為移動端網頁在手機的鍵盤彈起時，會導致window視窗的reisze事件被觸發，因為window視窗在鍵盤彈起時，確實被縮小到大約只剩一半了，那麼我們就可以在window.resize在被觸發時，設定這個input元素的位置，這裡根據不同的布局需要做一些計算，而且以防止其他事件導致window的resize被觸發（比如ios底部的導航欄也就是白條出現），所以需要設定乙個臨界值，比如只有在window的高度相比正常時的高度少了300時，我們才假定鍵盤被彈起了，此時再做處理。除此之外，我們還需要在這個頁面被銷毀時，移除這個事件，以防止記憶體洩露，這通常在你為全域性物件繫結了事件時（比如window物件）是個好習慣，切記。
在預設的vue-cli中，資源的打包路徑是以絕對路徑開始設定的，如果你的資源確實是直接放在乙個網域名稱之下，那麼你可以不用管，比如你打包後的檔案直接放在www.***x.com下的，那麼打包後的資源也確實會從這個網域名稱的根路徑開始查詢，這是ok的，但是，如果你的資源是放在乙個網域名稱的子路徑下面，比如：www.***.com/***/....那麼，這時候，以根路徑作為資源就不對了，會報404，那如何解決呢？在vue-cli3.0中你可以配置publicpath，你可以使用設定他，讓webpack以相對路徑來打包你的js，css，img等資源，如下：vue-config.js
module.exports =
}
以上這些記錄的是比較可見的問題，還有一些其他的不太具有描述性的問題和場景就沒有寫出來，不過這個專案讓我對vue的開發還是有很大的提示的，我相信，之後再使用vue開發時，這些我遇到的坑應該就不會再難倒我了，我沒遇到的，以後遇到了再去解決就是了，在專案編寫的過程中，一些經驗以及感悟，都是最重要的收穫。
新建乙個vue專案
用命令列生成vue專案框架需要npm包管理器來安裝,而npm又是在安裝nodejs的時候同時安裝的,所以首先要安裝nodejs。安裝完成後，開啟cmd。輸入 node v，出現類似v6.11.2這樣的版本號說明node安裝成功。輸入 npm v,出現類似 v3.10.10這樣的版本號說明npm安裝成...
vue新建乙個專案
全域性安裝vue腳手架工具vue cli npm install global vue cli cd 到想要建立專案的目錄下 vue init webpack 起的專案名稱 todolist 建立乙個基於webpack的模板新專案 專案初始化完成之後，進入該專案目錄，一般使用git bash直接進入...
新建乙個vue專案
第一步 npm安裝 參考 使用 npm映象 npm install g cnpm registry 這樣就可以使用cnpm 命令來安裝模組了 第二步 安裝vue cli cnpm install vue cli g 全域性安裝 vue cli 檢視vue cli是否成功，不能檢查vue cli,需要...