用Vue & Firebase 實作簡易購物網站11.管理商品頁面(一)(Firebase & Vuejs)
Published in
Jul 12, 2020
※成品連結:vue-shop-3b5cc.web.app
11.管理商品頁面(一)
一、安裝Vue-Firestore
(一)安裝指令
npm install vue-firestore --save
(二)於main.js引入
(三)於MProducts.vue引入
import { fb, db} from '../firebase';
(四)啟用Cloud Firestore
於 Firebase Console 點選 Database ,再點選建立資料庫(以測試模式啟動)啟用 Cloud Firestore ,啟用後畫面如下:
二、安裝vue2-editor(文本編輯器)
二、安裝vue2-editor(文本編輯器)
(一)安裝指令
npm install --save vue2-editor
(二)於MProducts.vue引入
三、設計商品列表頁面
(一)程式碼內容: 於MProducts.vue加上
(二)完成畫面
四、設計新增、修改商品視窗
(一)程式碼內容: 於MProducts.vue加上
1.Modal內容
2.在上方商品列表中的Add Products及Edit按鈕增加click事件,彈出Modal
3.設定click事件
(二)完成畫面