深圳web培訓：vue專案開發流程
一、企業專案開發流程
產品提需求
互動設計出原型設計
視覺設計出ui設計圖
前端開發出頁面模板
server端訪問資料庫
驗收測試
二、為什麼要使用vue:
5個前端，4個會vue，1個會react，那麼你該如何選擇
客戶要求使用vue
…三、如何選擇腳手架
自己搭建腳手架 webpack
使用現成的腳手架
頭部
內容
底部
4、依據結構設計頁面
views/home/index.vue
views/kind/index.vue
views/cart/index.vue
views/user/index.vue
以home為例
首頁頭部
首頁內容
5、配置路由import vue from 『vue』
import router from 『vue-router』
import routes from 『./routes』
vue.use(router)
export default new router()
router/routes.js ----- 命名檢視+命令路由+路由的懶載入+路由重定向
// 如果乙個頁面不需要底部，那麼就不要傳footer，比如kind無需底部
const routes = [,},
},},}]
export default routes
7、編寫頁面
pc： element-ui
iview
移動端： mint-ui
vant
11 22 33
prolist.vue
home/index.vue中引用元件
首頁頭部
8、資料請求
cnpm i axios -s
8.1 新增mock資料功能 ----- 開發前期 ---- 後端沒有介面時這樣用
cnpm i mockjs -d
api/mock.js
// 引入mockjs
const mock = require(『mockjs』)
const random = mock.random
const doubandata = function ()
articles.push(newarticleobject)
}return articles
}// mock.mock( url, post/get , 返回的資料)；
mock.mock(』/douban』, 『get』, doubandata)
api/index.js
import axios from 『axios』
import from 『mint-ui』
const baseurl = process.env.node_env === 『development』 ? 『』 : 『
console.log(baseurl)
// 新增請求***
axios.interceptors.request.use(function (config) , function (error) )
// 新增響應***
axios.interceptors.response.use(function (response) , function (error) )
const api = )
},requestpost (url, params) )}}
首頁頭部
prolist.vue
mock.js修改了模擬位址，以後切換更加簡單
mock.mock(』/daxun/douban』, 『get』, doubandata)
以後切換mock和開發伺服器只需要新增和刪除main.js中的mock欄位即可
10、狀態管理器
cnpm i vuex -s
建立store/index.js,store/home.js,store/kind.js
index.js
import vue from 『vue』
import vuex from 『vuex』
import home from 『./home』
import kind from 『./kind』
vue.use(vuex)
const store = new vuex.store(
})export default store
kind.js
export default ,
getters: {},
actions: {},
mutations: {}
}home.js
import api from 『@/api』
const store = ,
getters:
},actions: ) ).catch(err => console.log(err))}},
mutations: ,
changeprolist (state, data) }}
export default store
home/index.vue 通過mapstate輔助函式可以直接獲取狀態管理器中的值，通過dispatch 觸發非同步的actions
首頁頭部 }
使用mapactions的等價寫法
首頁頭部 }
詳情頭部
內容
詳情底部
修改routes.js}宣告式跳轉
prolist.vue
}程式設計時跳轉
methods: })}
}詳情頁面可以通過 this.$route.params.id 拿到傳遞過來的資料
13、下拉重新整理以及上拉載入功能
以分類為例
分類頭部
如果想要結合vuex實現
kind/index.vue
分類頭部
store/kind.js
import api from 『@/api』
export default ,
getters: {},
actions: ) )
},loadtop () )
})},
loadbottom (, params) )})}
},mutations: }}
14、回到頂部
components/backtop.vue
返回頂部
使用時可以給需要的地方新增乙個
15、購物車業務邏輯
購物車頭部
16、註冊功能 — 計算屬性註冊
登入登入
加粗樣式
web專案開發總結
一 專案開發需要注意的幾點 1.系統布局選擇非常重要，選擇合適的ui能夠庫快速的開發 2.系統後台框架，選擇spring springmvc hibernate 3.前端的js框架，jquery jquery ui page 4.新增 修改前端傳送json格式，所有的資料一次性傳送 5.查詢的複雜條...
VUE專案開發流程
安裝npm 安裝webpack vue cli 2.9.6版本 版本不同可能會導致以下一些目錄結構以及錯誤解決辦法不符合實際情況 初始化建立專案，專案名稱 專案描述 擁有者等等資訊，d code self vue init webpack common component project name ...
vue開發（一） 建立vue專案
win r 輸入cmd，執行 node v 和 npm v 均出現版本號，即安裝成功。注 雖然node自帶npm，但是不是最新版本 可以執行 npm install g npm 公升級為最新版 第三 使用 npm 映象 npm 映象是國產，載入執行之類的速度會快很多。npm install g cn...