vue cl3、vuex、vue-router、ant design vue、axios搭建一個簡易的單頁面應用

源碼碼雲:https://gitee.com/ChinaCYZ/zhengyekeji
在線演示地址:http://cheyouzheng.top/test/index.html
找工作時,發現一套不錯的前端機試題,分享給大家。
之前都是使用原生JS開發,Vue也只是CDN方式使用,沒有使用全家桶,經過這次項目可以提高大家的Vue全家桶熟練度。

要求如下:

使用vue、vuex、vue-router、ant design vue、axios搭建一個簡易的單頁面應用,頁面風格樣式使用ant design vue默認風格
1、有 登錄頁、人員列表、人員詳情、人員編輯頁面
2、所有頁面需要有麪包屑導航、頁面標題
3、人員詳情頁有編輯按鈕,可點擊進入人員編輯頁面
4、編輯頁面需要使用ant design vue 的 form組件,驗證人員姓名爲必填,驗證手機號和email格式是否正確…
跟多要求請看碼雲 /doc/WEB前端工程師面試.docx

建議先根據需求,嘗試完成開發,進步更大


我的開發步驟

  1. 搭建開發環境(node.js)
  2. 創建項目(vue cli)
  3. 項目開發(引入vuex、vue-router、ant design vue、axios)
  4. 打包上線

1.搭建開發環境(node.js)
https://blog.csdn.net/qq_39816586/article/details/105095695
2.創建項目(vue cli)
https://blog.csdn.net/qq_39816586/article/details/105097021
3.項目開發
引入vuex、vue-router、ant design vue、axios
剩餘待完善······
4.打包上線
我是vue cli3項目
1.src目錄下創建vue.config.js

在這裏插入圖片描述

module.exports = {
    publicPath: './'
}

注意:我的router.js設置mode爲history會出現路由白屏,目前正在找原因(誰幫忙找到了給個答覆哈謝謝)

在這裏插入圖片描述
2.npm run build
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章