怎么用Vue搭建個人博客

本篇內容介紹了“怎么用Vue搭建個人博客”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

                最近心血來潮在開發個人博客網站，剛好可以趁這個機會出一個系列文章講講前端界面的設計，后端業務邏輯的實現以及前后端的交互。具體的架構我是采用Vue.js + Node.js + mysql。前端界面設計使用了element-ui和mavon-editor，后端依舊使用了express框架。首頁效果和文章發表界面效果如圖所示：

        接下來我們開始前后端環境的搭建。首先，Node.js與mysql的安裝我就直接跳過了，下載下來安裝next到底就可以安裝成功。我們首先在全局安裝vue-cli腳手架，命令為：

npm install vue-cli -g

        接著使用vue-cli搭建一個vue2.0項目，命令：

vue init webpack vue_demo

        集成的功能我暫時只選擇了vue-router。eslint和unit tests我暫時都沒有選擇安裝。然后就可以啟動vue項目了，命令為：

npm run dev

        到這里我們前端vue環境暫時告一段落。接下來我們搭建express項目。首先全局安裝express生成器，命令為：

npm install express-generator -g

        然后使用express-generator快速搭建一個express項目，命令為：

express article_demo

        然后按照提示進入項目安裝依賴，依賴安裝成功就可以啟動項目。

        express到這里也搭建成功了，但是我們需要對express進行適當的配置：連接數據庫以及發起請求的公共方法。首先在項目根目錄創建config.js文件用于存放數據庫配置信息以及公共參數。

        然后在項目根目錄創建db文件夾，在db文件夾下創建mysql.js用于mysql數據庫連接的初始化和增刪改查方法的封裝：

        在項目根目錄下創建util文件夾，存放公共方法。在util下創建postHelper.js文件，用戶封裝request請求。我們調用第三方API比如微信精選文章時需要發起請求：

        然后在util下創建common.js文件用于存放全局公共方法，比如注冊密碼加密，接收前端傳參等方法：

        在util下創建bootloader.js用于封裝全局log方法以及接口返回參數正確和錯誤返回格式封裝：

        打開根目錄下的package.json文件，添加apidoc的配置。apidoc用于自動根據接口注釋生成接口文檔：

        最后打開app.js文件，設置允許跨域請求。目前本地測試我設置允許所有域名都可以跨域訪問：

“怎么用Vue搭建個人博客”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！