Vue全家桶以及常用知識點

一、介紹:VUE是什么

　　Vue (讀音 /vjuː/，類似於 view) 是一套用於構建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易於上手，還便於與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠為復雜的單頁應用提供驅動。

二、VUE全家桶及項目架構

　　Vue有著名的全家桶系列，包含了vue-router（http://router.vuejs.org），vuex（http://vuex.vuejs.org）， vue-resource（https://github.com/pagekit/vue-resource）。再加上構建工具vue-cli，就是一個完整的vue項目的核心構成。

• vue-router路由

　　對於大多數單頁面應用，都推薦使用官方支持的 vue-router 庫。更多細節可以移步 vue-router 文檔。

　　推薦使用npm工具來安裝vue-router
　　npm install vue-router
　　通過import導入並定義Vue模塊、vue-router模塊和需要使用的組件，在本例中，分別是Goods、Ratings和Seller組件。最后，如果在一個模塊化工程中使用它，必須要通過 Vue.use() 明確地安裝路由功能。
　　import Vue from’vue’
　　importRouter from’vue-router’

　　import Goods from ‘@/components/goods/goods’;
　　import Ratings from ‘@/components/ratings/ratings’;
　　import Seller from ‘@/components/seller/seller’;

　　Vue.use(Router); // 需要import Vue和Router，不然會報錯undefined
　　通過const router= new VueRouter（）來定義一個路由，並傳入對應的配置，包括路徑path和組件components。最后，在使用newVue來創建和掛載vue根實例的時候，記得要通過 router配置參數注入路由，即在router中export出來的路由對象，從而讓整個應用都有路由功能。

• vuex狀態管理

　　Vuex是Vue.js應用程序的狀態管理模式+庫。它充當應用程序中所有組件的集中存儲，其規則確保狀態只能以可預測的方式進行更改。它還與Vue的官方devtools擴展集成，以提供高級功能，例如零配置時間旅行調試和狀態快照導出/導入。

　　State：vuex中的數據源，我們需要保存的數據就保存在這里，可以在頁面通過 this.$store.state來獲取我們定義的數據；

　　Getters：Getter相當於vue中的computed計算屬性，getter 的返回值會根據它的依賴被緩存起來，且只有當它的依賴值發生了改變才會被重新計算，這里我們可以通過定義vuex的Getter來獲取，Getters 可以用於監聽、state中的值的變化，返回計算后的結果。

　　Mutations：數據我們在頁面是獲取到了，但是如果我們需要修改count值怎么辦？如果需要修改store中的值唯一的方法就是提交mutation來修改，我們現在Hello World.vue文件中添加兩個按鈕，一個加1，一個減1；這里我們點擊按鈕調用addFun（執行加的方法）和reductionFun（執行減法的方法），然后在里面直接提交mutations中的方法修改值。

 　　Actions：我們看到，當點擊三次后值從2變成了-1；頁面上的值是改變了；我們達到了修改store中狀態值的目的，但是，官方並不介意我們這樣直接去修改store里面的值，而是讓我們去提交一個actions，在actions中提交mutation再去修改狀態值，接下來我們修改index.js文件，先定義actions提交mutation的函數。

 　　mapState、mapGetters、mapActions：如果我們不喜歡這種在頁面上使用“this.$stroe.state.count”和“this.$store.dispatch('funName')”這種很長的寫法，那么我們可以使用mapState、mapGetters、mapActions就不會這么麻煩了；

•   vue-resource

　　Vue-resource有體積小，支持IE9以上的瀏覽器，支持promise特性的特點。同樣推薦使用npm來安裝Vue-resource。
　　$ npm install vue-resource
　　在安裝並引入vue-resource后，可以基於全局的Vue對象使用http，也可以基於某個Vue實例使用http。

 

 

　　在發送請求后，使用then方法來處理響應結果，then方法有兩個參數，第一個參數是響應成功時的回調函數，第二個參數是響應失敗時的回調函數。
　　vue-resource的請求API是按照REST風格設計的，它提供了7種請求API：
　　· get(url,[options])
　　· head(url,[options])
　　· delete(url,[options])
　　· jsonp(url,[options])
　　· post(url,[body], [options])
　　· put(url, [body],[options])
　　· patch(url,[body], [options]) 

• vue-cli vue腳手架

　　在一個 Vue CLI 項目中，@vue/cli-service 安裝了一個名為 vue-cli-service 的命令。你可以在 npm scripts 中以 vue-cli-service、或者從終端中以 ./node_modules/.bin/vue-cli-service 訪問這個命令。

1. .安裝vue-cli

   ① 使用npm（需要安裝node環境）全局安裝webpack，打開命令行工具輸入：npm install webpack -g或者（npm install -g webpack），安裝完成之后輸入 webpack -v，如下圖，如果出現相應的版本號，則說明安裝成功。

2. 用vue-cli來構建項目

   ① 我首先在D盤新建一個文件夾（dxl_vue）作為項目存放地，然后使用命令行cd進入到項目目錄輸入：

   vue init webpack baoge 

   baoge是自定義的項目名稱，命令執行之后，會在當前目錄生成一個以該名稱命名的項目文件夾。

   輸入命令后，會跳出幾個選項讓你回答：

   • Project name (baoge)： -----項目名稱，直接回車，按照括號中默認名字（注意這里的名字不能有大寫字母，如果有會報錯Sorry, name can no longer contain capital letters），阮一峰老師博客為什么文件名要小寫 ，可以參考一下。
   • Project description (A Vue.js project)： ----項目描述，也可直接點擊回車，使用默認名字
   • Author ()： ----作者，輸入你的大名
     接下來會讓用戶選擇：
   • Runtime + Compiler: recommended for most users 運行加編譯，既然已經說了推薦，就選它了
     Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere 僅運行時，已經有推薦了就選擇第一個了
   • Install vue-router? (Y/n) 是否安裝vue-router，這是官方的路由，大多數情況下都使用，這里就輸入“y”后回車即可。
   • Use ESLint to lint your code? (Y/n) 是否使用ESLint管理代碼，ESLint是個代碼風格管理工具，是用來統一代碼風格的，一般項目中都會使用。
     接下來也是選擇題Pick an ESLint preset (Use arrow keys) 選擇一個ESLint預設，編寫vue項目時的代碼風格，直接y回車
   • Setup unit tests with Karma + Mocha? (Y/n) 是否安裝單元測試，我選擇安裝y回車
   • Setup e2e tests with Nightwatch(Y/n)? 是否安裝e2e測試 ，我選擇安裝y回車
3. npm install ：安裝所有的模塊，如果是安裝具體的哪個個模塊，在install 后面輸入模塊的名字即可。而只輸入install就會按照項目的根目錄下的package.json文件中依賴的模塊安裝（這個文件里面是不允許有任何注釋的），每個使用npm管理的項目都有這個文件，是npm操作的入口文件。因為是初始項目，還沒有任何模塊，所以我用npm install 安裝所有的模塊。安裝完成后，目錄中會多出來一個node_modules文件夾，這里放的就是所有依賴的模塊。

4. 啟動項目

   npm run dev

   如果瀏覽器打開之后，沒有加載出頁面，有可能是本地的 8080 端口被占用，需要修改一下配置文件 config里的index.js，如果本地調試項目時，建議將build 里的assetsPublicPath的路徑前綴修改為 ' ./ '（開始是 ' / '），因為打包之后，外部引入 js 和 css 文件時，如果路徑以 ' / ' 開頭，在本地是無法找到對應文件的（服務器上沒問題）。所以如果需要在本地打開打包后的文件，就得修改文件路徑。

5. 注意：在進行vue頁面調試時，一定要去谷歌商店下載一個vue-tool擴展程序。

6. vue-cli的webpack配置分析

           

1. • 從package.json可以看到開發和生產環境的入口。
   • 可以看到dev中的設置，build/webpack.dev.conf.js，該文件是開發環境中webpack的配置入口
   • 在webpack.dev.conf.js中出現webpack.base.conf.js，這個文件是開發環境和生產環境，甚至測試環境，這些環境的公共webpack配置。可以說，這個文件相當重要。
   • 還有config/index.js 、build/utils.js 、build/build.js等，具體請看這篇介紹：https://segmentfault.com/a/1190000008644830

　　7. 自己的項目文件都需要放到 src 文件夾下。在項目開發完成之后，可以輸入 npm run build 來進行打包工作。npm run build

　　 save 安裝包信息將加入到dependencies（生產階段的依賴） save-dev 安裝包信息將加入到devDependencies（開發階段的依賴），所以開發階段一般使用它

　　打包完成后，會生成 dist 文件夾，如果已經修改了文件路徑，可以直接打開本地文件查看。
　　項目上線時，只需要將 dist 文件夾放到服務器就行了。

三、vue工程目錄結構

 　　下圖是一個簡單的vue項目的大概結構，下面簡要介紹一下每個文件夾中一般都會存放哪些內容。

components/文件夾用來存放Vue 組件。個人建議，把每一個組件中使用到的image圖片放置到對應的組件子文件目錄下，便於統一的管理 Node_modules/npm安裝的該項目的依賴庫 vuex/文件夾存放的是和 Vuex store 相關的東西（state對象，actions，mutations) router/文件夾存放的是跟vue-router相關的路由配置項 build/文件是 webpack 的打包編譯配置文件 static/文件夾存放一些靜態的、較少變動的image或者css文件 config/文件夾存放的是一些配置項，比如服務器訪問的端口配置等 dist/該文件夾一開始是不存在，在我們的項目經過 build 之后才會產出 App.vue根組件，所有的子組件都將在這里被引用 index.html整個項目的入口文件，將會引用我們的根組件 App.vue main.js入口文件的 js 邏輯，在webpack 打包之后將被注入到 index.html 中