vue全家桶

本文涉及到webpack、node.js、vue、vue-router、vuex、axios、less、element-ui、es六、git等相關知識。

一、前提基礎

• vue.js有著名的全家桶系列，包含了vue-router、vuex、axios，再加上構建工具vue-cli，就是一個完整的vue項目的核心構成。
• 學習本文以前須要掌握基本的js、css、html基礎知識
• node.js、git、webpack基礎知識
• 對vue.js、vuex等有基本的瞭解
• vue官網：cn.vuejs.org/v2/guide/
• vue-router官網：router.vuejs.org/zh/

二、開發環境

1. 安裝node.js,直接去官網下載安裝包便可：nodejs.org/en/，安裝完成之後能夠打開cmd/git,經過node -v/npm -v 查看版本。

   

2. 安裝webpack, 經過npm install -g webpack全局安裝。
3. 安裝git(用於代碼管理)，直接百度下載安裝包便可

三、開始開發

1. 這裏咱們採用vue-cli搭建一個新的項目，因此須要先安裝腳手架 npm install --g vue-cli。
2. 初始化一個項目：vue init webpack vue_demo_project，由於要用到vue-router,全部這裏選擇安裝vue-router，建議安裝ESlint，有助於養成良好的編程習慣。

   

3. 安裝依賴：cd vue_demo_project, npm install (若是安裝速度較慢，可使用cnpm安裝，npm install -g cnpm --registry=https://registry.npm.taobao.org)。
4. 在編輯器中打開項目，在根目錄下運行npm run dev。默認是8080 端口，能夠在config裏的index.js修改。

   

ps：建議將build 裏的assetsPublicPath的路徑前綴修改成 ' ./ '，由於打包以後，外部引入 js 和 css 文件時，若是路徑以 ' / ' 開頭，在本地是沒法找到對應文件的（服務器上沒問題）。因此若是須要在本地打開打包後的文件，就得修改文件路徑。

三、路由配置

1. 按下圖所示新建pages,layout文件夾，新建vue文件（這裏NewDetails組件的path應該爲'/new_details'）。

   

2. 如圖所示配置路由文件。頁面效果以下：

   

四、按需加載和路由鑑權

1. 安裝vuex（cnpm i vuex -S）,修改router下的index.js文件以下圖所示，採用按需加載：

2. 效果以下所示：

3. 點擊按鈕跳轉到新聞詳情頁面，因爲詳情頁須要登陸權限，重定向到了登陸頁面，並保留了重定向以前的頁面路由，登陸以後能夠直接跳轉至新聞詳情頁。

五、axios的使用以及攔截器的設置。

1. 安裝axios（cnpm i axios -S）,使用並設置攔截器，若是所示：

   

2. 點擊按鈕獲取菜單數據，這裏使用express啓動服務，封裝菜單api接口來模擬實際場景。

   

3. 點擊按鈕，效果如圖所示。

   

   

六、api集中管理與按需引用。

1. 對api的集中管理和按需引用有助於項目管理和重構，減輕vue實例的負擔，優化項目性能。
2. 從main.js中刪除require('./http')，修改http下index.js文件，修改home.vue中的接口引用。如圖所示：

   

七、css預處理語言的使用以及UI的使用。

1. 使用css預處理有利於優化性能、提升開發效率。減小css瀏覽器兼容性代碼、增大代碼複用率，減小重構時冗餘css帶來的困擾。
2. ui的使用能夠大大加快前端頁面的構建速度，提搞開發效率。
3. 本文以less以及element-ui爲例：安裝cnpm i -S less less-loader element-ui，在main.js中使用。

   

4. 在Login.vue文件中使用element-ui的form組件，如圖：

   

   form組件，html部分

   

   form組件，js部分

   

   form組件，css部分，頁面效果以下：

   

5. 修改router.js文件，將login組件提取到父級，編寫登陸頁面和api，以下圖所示

   

6. 在Login.vue文件中使用，進行登陸校驗並保存token到store中

   

   

   

7. 修改登陸成功的方法，使登陸成功後跳轉首頁或者到重定向的頁面。

   

8. 刷新頁面（刷新以後，store將初始化），從新來一遍，測試路由鑑權是否生效。

   

   點擊查看詳情的按鈕，因爲詳情頁須要登陸權限，沒有登陸，頁面被重定向到了登陸頁。

   

   登陸頁面帶了重定向的路由信息，點擊登陸，登陸成功後，頁面跳轉到詳情頁。路由重定向成功。

   

   回到首頁，再點擊查看詳情按鈕，因爲用戶已登陸，咱們已保存token信息到store中，此時發現頁面直接跳轉到詳情頁。到此，路由鑑權成功(再次過程當中，不要刷新頁面,不然token信息將丟失，頁面將再次跳轉到登陸頁)。

   

八、vuex的使用以及解決頁面刷新store信息初始化的問題。

• vuex基礎知識介紹

1. 以前的例子中，在測試路由鑑權時已經簡單的使用vuex的功能，固然那時也可使用一個所有變量來代替，接下來開始vuex之旅。安裝cnpm i vuex -S。(vuex官網：vuex.vuejs.org/zh/guide/)
2. 修改store下的index.js文件，新建state.js,getters.js,mutations.js,actions.js,下面咱們模擬一個todoList,效果以下圖所示：

   

   

   

   

3. 上述只是對vuex使用的簡單介紹，其功能遠不止於此，如vuex的模塊化，命名空間等能夠自行去官網查看，後面也會在nuxt、ssr、element-ui組件化等文中作出相關介紹。

• 上面咱們簡單的介紹了下vuex的核心功能模塊，如今開始解決以前遺留的刷新store初始化的問題。

1. 分析問題的緣由，因爲store是保存在本地的數據，當頁面刷新以後，數據將回到最初始狀態。怎麼解決？須要將保存在token中信息保存起來，在頁面刷新以後從新賦值給token。
2. 方法：（1）保存在數據庫。（2）保存至cookie或者storage。
3. 咱們選擇使用storage作演示。如今須要修改login.vue的login方法和header.vue，在main.js中添加refreshUserInfo的方法，新建utils文件夾，添加對應的方法，實例代碼以下：

   

   

4. 回到首頁，刷新頁面，一步步來操做驗證。頁面效果以下：

   

5. 一開始沒有用戶信息，header提示登陸，點擊詳情按鈕，因爲沒有登陸，沒有訪問權限，將被重定向到登陸頁面，點擊登陸。

   

6. 登陸成功以後，header顯示退出按鈕，此時在點擊詳情按鈕，發現直接跳轉到詳情頁面，刷新頁面以後，再次點擊，仍是到詳情頁。此時打開控制檯（f12），看到token信息保存在local storage中。

   

7. 點擊退出按鈕，發現頭部顯示登陸按鈕，local storage中token也被清除了。

   

8. 此時回到首頁，在點擊詳情按鈕，發現又到了登陸頁。
9. 到此，咱們整個流程基本結束。當前，在實際的項目中，登陸和退出都是須要請求後臺接口的。大多時候選擇cookie來實現。使用cookie的方式基本和使用localStorage相同，能夠自行安裝使用js-cookie（cnpm i -S js-cookie）來模擬, 使用get/set/remove替換storage的getItem/setItem/removeItem便可。

九、項目結構介紹。

十、打包上線

1. npm run build 打包以後會生成dist文件，將dist下的文件所有放在服務器目錄下便可。
2. 須要提醒的時，本文僅用於演示，在實際開發中，須要對接後臺的api服務，若是是採用靜態站點部署的項目，能夠直接刪除server文件夾。
3. 若是是非靜態部署的項目，好比本文的server部分的代碼或者是使用的nuxt、或者ssr項目。項目須要運行在node環境下，並啓動node服務，此時須要修改package.json以及build.js文件，將服務端的代碼也打包進去。服務器上也需安裝node.js並啓動node服務，可使用pm2來管理node進程。
4. 本文到此結束，後續我還會繼續寫nuxt、react等項目的構建、以及vue經常使用功能的配置以及組件封裝，如，svg、富文本、組件樹、循環嵌套的表單、附件的上傳下載與導出、將頁面保存成word等。