創(chuàng)建項目 learn
直接在工作空間下用vue-cli來創(chuàng)建
vue init webpack learn
Image 001.png
安裝依賴
Image 002.png
執(zhí)行
cnpm i
cnpm run dev
成功的話講出現(xiàn)這個畫面
Image 003.png
正式開始寫項目
1、首先修改項目結構
Image 004.png
- 新建一個vuex文件夾,用來管理部分狀態(tài),比如 登錄
里面新建一個store.js - 新建一個api文件夾,用來寫axios的請求借口,里面放一個api.js
- 新建一個data文件夾,用來存放或模擬數(shù)據(jù),放一個data.js
-
里面放空內(nèi)容就行
現(xiàn)在的結構
Image 005.png
2、在main.js里面引入vuex element等
Image 006.png
3、修改App.vue文件代碼,確認element是否引入成功
代碼
Image 007.png
輸出:
Image 008.png
說明是沒有問題的
組件規(guī)劃和寫路由結構
預想中要實現(xiàn)的功能:
- 主頁 home
- 商品展示 products
- 使用幫助 FAQ
- 用戶操作 manger
- 用戶信息 manger/my
- 發(fā)貨管理 manger/send
- 歷史發(fā)貨 manger/history
- 登錄 login
- 注冊 regin