還是以Blog項目來講解,最近我本人利用閑暇時間,以博客作為參考學習一些新的技術並嘗試之前沒有嘗試過的思路來玩玩。
技術看似枯燥,但是帶有一個目的來學,你會發現還是蠻有趣的。
主要實踐的就是前后端分離,本次只是淺嘗輒止,不作深入,主要對項目目錄文件詳解
項目圖,如下所示:
README.md 項目介紹
index.html 入口頁面
build 構建腳本目錄
build-server.js 運行本地構建服務器,可以訪問構建后的頁面
build.js 生產環境構建腳本
dev-client.js 開發服務器熱重載腳本,主要用來實現開發階段的頁面
dev-server.js 運行本地開發服務器
utils.js 構建相關工具方法
webpack.base.conf.js webpack基礎配置
webpack.dev.conf.js webpack開發環境配置
webpack.prod.conf.js webpack生產環境配置
config 項目配置
dev.env.js 開發環境配置
index.js 項目配置文件
prod.env.js 生產環境變量
test.env.js 測試環境變量
src 源碼目錄
main.js 入口js文件
App.vue 根組件
components 公共組件目錄
HelloWord.vue和Post.vue
asserts 資源目錄,這里的資源會被webpack構建
routes 前端路由
index.js
static 純靜態資源,不會被webpack構建
package.json 版本庫依賴、開發者信息等等
其它像eslint之類的是一種語法檢查