天天看點

2-前端vue

####

開發工具:pycharm

開發環境:node

項目目錄:

2-前端vue

vue-cli建立項目

使用腳手架,vue-cli,建立項目

vue create ProjectName

這裡使用vue2預設,來開發,不用vue3,

建立完之後,明确提示你了,啟動項目的指令,

2-前端vue

views添加頁面

在views下面添加頁面,

一個頁面有三部分,template,script,style

2-前端vue

APP.vue頁面添加路由

2-前端vue

vue-router設定路由跳轉

2-前端vue

vuetify開發頁面

2-前端vue

把這兩部分都複制到你的頁面中去,

2-前端vue

 添加修改和删除按鈕,這兩個隻是按鈕,邏輯需要調用後端接口

2-前端vue

###

新增添加按鈕,

2-前端vue

data-app="true"解決這個問題,

2-前端vue

### 

axios調用後端接口

 建立檔案夾api

添加三個檔案,

api.js

http.js

xxx.js

測試接口是否通

2-前端vue
2-前端vue

get

post

是怎麼發起的, 

注意跨域問題,

components元件化開發

 抽取公共部分作為元件,用來減少代碼重複

1,抽取

2-前端vue

2,導入

2-前端vue

3,引用,并且父元件把資料傳遞給子元件,

2-前端vue