專案步驟

“好”久不见發表於2024-03-23

前端專案初始化步驟:

  1. 安裝 vue 腳手架(全域性安裝一次就可以一直使用)
  2. 透過 vue 腳手架建立專案
  3. 配置 vue路由
  4. 配置 element-ui 元件庫
  5. 配置 axios 庫
      視覺化的=>(windows + r 開啟執行皮膚 輸入 cmd,在終端 vue ui)
      命令式的=>
      • cmd建立專案
      • 初始化git,用到的功能Babel,Router,使用配置檔案(比如在'.babel.rc'檔案中)
      • 按裝外掛 element-ui
      • 配置axios外掛依賴
  6. 初始化 git 遠端倉庫
  7. 將本地專案託管到 github 或者 碼雲 中 (碼雲比github快)

    碼雲地址:gitee.com(賬號1801109密碼123222),

         新增公鑰SSH(點選頭像,設定,左側欄SSH,點選生成公鑰)

           新增公鑰步驟:開啟cmd

                  ssh-keygen -t rsa -C "1135664916@qq.com"

                  三次回車完成ssh key

                  檢視~/.ssh/id_rsa.pub檔案內容,獲取 public key公鑰,然後複製過來貼在新增公鑰的欄裡(標題欄 可以自己改)

                  測試能不能用: ssh -T git@gitee.com(首次使用需要確認,再測試一次,如果出來hi xxx!……就表明新增成功了)

    建立倉庫:gitee.com官網頭像旁邊的+號,新建倉庫

         倉庫名稱:(不能重複),將使用Readme檔案初始化這個倉庫的✅去掉,點選建立

          

        出現這個頁面就顯示建立成功了,開啟cmd 執行全域性設定的那兩行

        如果已經建立了專案,就在專案檔案中進行 powershell 開啟終端 先檢視一下 git status狀態,如果有需要提交的 git add . 再 git commit -m 'add',再檢查一下狀態 git status,先 cd 到專案根目錄 再進行 最下面的第二行命令,再執行最後一行命令(會讓你輸入碼雲的使用者名稱和密碼),完事了再碼雲的遠端倉庫中點選重新整理,頁面重新整理了有提交資訊了就成功了。

後臺專案的環境配置:vue_api_server 這個檔案就是後臺 api 專案

    1. 安裝 MySQL 資料庫 (安裝phpStudy,只執行MySQL就好,再倒入資料庫[vue_api_server資料夾中/db/mydb.sql指令碼檔案]----還原資料庫名稱要和mydb這個名稱一致,檢視資料庫是否還原了--->mysql工具->開啟資料庫目錄->mydb->裡面有對應的檔案就表明還原完成了)
    2. 安裝 Node.js 環境
    3. 配置專案相關資訊(在 vue_api_server 檔案上 powershell 開啟終端 輸入 npm install 來安裝所有的依賴項,cls 是清屏,用 node app.js 來跑 postman 介面專案,檢視介面可以在 素材 電商管理 API 介面文件中看)
    4. 啟動專案
    5. 使用 postman(改名了Apifox) 測試後臺專案介面是否正常,入如下圖👇在Apifox中點選開發環境右邊的三條槓,檢視預設服務地址是否跟 window 的 IP一致(因為wifi的熱點的ip地址不一樣,所以要看情況更改ip地址)

登陸介面:el-form,el-form-item,el-input,el-button

  在IDE裡面開啟終端建立分支:git checkout -b login

  檢視當前分支:git branch

IDE中進行梳理:main.js是整個專案的入口檔案

        App.vue根元件

        router.js路由檔案

相關文章