用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事件
(二)完成畫面
