製作背景
此專案是幫朋友寫的,因為需要百度搜尋引流,再加上我是vue使用者,所以選擇了Vue的SSR框架NuxtJS。由於與後臺互動的功能不多,所以就負責了所有的前後端,
第一次寫文章我也不知道說啥,看吧...
紅豆記官網
Github
使用方法
# 安裝依賴
$ npm run install
# 執行
$ npm run dev
# 打包
$ npm run build
# 線上使用pm2部署
$ npm run prd
複製程式碼
目錄結構
紅豆記
|
│ README.md 專案說明檔案
|
| layouts 佈局目錄,用於組織應用的佈局元件,不可更改
|
| pages 用於存放寫的頁面,我們主要的工作區域
|
| server 使用node koa2框架寫後臺和服務端渲染
|
| dbs 存放資料庫配置檔案
|
│ nuxt.config.js 用於組織Nuxt.js應用的個性化配置,已覆蓋預設配置
|
│ package-lock.json npm自動生成,用於幫助package的統一設定的,yarn也有相同的操作
|
│ package.json npm 包管理配置檔案
|
│ .nuxt Nuxt自動生成,臨時的用於編輯的檔案,build
|
| assets 用於組織未編譯的靜態資源如LESS、SASS或JavaScript
|
| components 用於自己編寫的Vue元件,比如波動元件、日曆元件、分頁元件
|
| middleware 用於存放中介軟體
|
| plugins 用於存放JavaScript外掛的地方
|
| static 用於存放靜態資原始檔,比如圖片
|
| store 用於組織應用的Vuex 狀態管理
|
| .editorconfig 開發工具格式配置
|
| .eslintrc.js ESLint的配置檔案,用於檢查程式碼格式
|
| .gitignore 配置git不上傳的檔案
|
|
└───layouts 公共模板入口檔案
| |
│ │ default.vue 預設入口檔案
| |
│ │ error.vue 404錯誤頁面
| |
│ │ none.vue 空白頁面(用來寫註冊協議和隱私協議適配手機)
| |
│ │ ...
│
│
└───components 公用元件封裝
| |
│ │ home 首頁元件
| |
│ │ public 首頁元件封裝
| |
│ │ ...
│
│
└───page 路由介面
│ │
│ │ index 首頁
│ │
│ │ about 關於我們
│ │
│ └───news 最新動態
│ │ index.vue 動態主頁
│ │ _id.vue 動態詳情頁
│ └─ ...
│ │
│ │ service.vue 意見反饋
│ │
│ │ edit.vue markdown測試檔案
│ │
│ │ privacy.vue 隱私協議
│ │
│ │ terms.vue 註冊協議
│ │
│ │ ...
│ │
│ │
└───md 從零開始nuxt開發記錄文件
.
複製程式碼