記錄一次項目代碼遷移過程

前因：已有項目缺乏測試工具，需引入vue-cli 自帶的測試工具：單元測試（karma+mocha），E2E測試（Nightwatch），故而須要進行代碼遷移。

思路：不重複的代碼文件，直接拷貝到對應的目錄下；重複文件（主要是配置文件），對比代碼後copy/修改代碼。

步驟記錄：

1、建立新的vue項目框架

#mkdir code-move

#cd code-move

#vue init webpack webAdmin-web

 

2、代碼遷移

 思路在本文開頭已經描述，就是增刪改的操做。

 一、對比項目結構
  新舊項目目錄結構幾乎沒有變化，結構以下圖所示：
   

  接下來只須要對每一個文件夾、每一個文件進行修改就好了。

 二、對比、覆蓋、修改
    能夠利用代碼對比工具，有在線對比的，也能夠下載軟件壓縮包安裝。

    我是利用的VSCode與Git的特性【由於以前不知道有代碼對比工具哈哈哈哈】：在VSCode中對遠程倉庫上已有文件進修改時，VSCode會提示出變更之處（在行標號那裏能夠看到），藍色段表示修改，綠色段表示新增，紅色的箭頭表示此處缺失代碼段（即刪除）。根據此規則進行了代碼的複製粘貼還原：打開兩個VSCode窗口，分別打開已有項目、新項目，瀏覽器打開gitLab中已有項目（這裏的代碼做爲對比源），相同文件：將新項目的代碼粘貼到原有項目，對比gitlab中的代碼，進行復制修改。
    說明：

• 須要對比代碼來修改的文件基本上都是配置文件，須要仔細。
• bulid 目錄下的文件幾乎都是直接覆蓋（用原項目代碼覆蓋新項目），變更不大。
• config 目錄下的文件是配置文件，通常也是直接覆蓋。
• src 目錄下的文件直接覆蓋。
• static 目錄下的文件直接覆蓋。
• test 目錄下的文件保留爲新項目的代碼文件，暫不修改。（由於就是須要add測試工具到原有項目）
• 文件：利用代碼對比工具，對比修改。（不肯定的配置文件能夠先備份，便於以後恢復）。
• 費時最長的的package-lock.json文件，代碼總行數太長！！！存儲的是依賴包的信息（版本、下載連接、依賴等）。

 

 三、檢測遷移成功與否

     代碼整理完畢後：

• #npm install        //  初始化項目（下載依賴包）
• 修改配置文件  （根據項目狀況）  

        ① src/main.js：確認是否開啓mockjs ；

        ② config/dev.env.js：配置開發環境

NODE_ENV: '"development"', 
BASE_API: '"http://後臺服務器IP:端口"', 
WS_BASE_URL: '"ws://前端虛擬機IP:端口"'

• #npm run dev     //  運行項目，查看是否報錯（報錯了，見 修改node sass的錯誤）

      成功登陸進入系統後，簡單測試一下是否存在由於這次改動而形成的運行錯誤（各個界面都點一點......）。

 

  四、上傳新項目到git（重命名）

      確認代碼遷移成功後，下一步就能夠開始進行新功能（測試環境搭建）的添加了，在此以前，前保存當前狀態，將新項目上傳到git，便於進行版本控制。

• 在GitLab新建一個倉庫
• 將已存在的文件夾上傳到這個倉庫 

• #cd existing_folder
  #git init
  #git remote add origin http://IP/命名空間/webAdmin-web.git
  #git add .
  #git commit
  #git push -u origin master
  

   

  五、搭建測試環境

      愉快的開始進行測試環境的搭建吧哈哈哈哈！