傑普實訓（前端）第二天知識點總結

12.搭建項目架構

架構師（組長）初始化項目

架構師（組長）commit到版本控制器上 （svn/github）

工程師（組員）checkout 到本地，開發

工程師（組員）先update 再commit到版本控制器上

…

架構師（組長）更新所有人的代碼，測試，打包，部署

1. 開發環境

   node 類似于jvm，jvm是java的執行的環境，node是js的執行環境

   當js代碼運作在node中可以使用子產品化，

   smart

   jquery

   git 版本控制工具，适用于協作開發

   vscode 代碼編輯器

   無腦安裝 -> 直接下一步

   測試開發環境

   1. 打開dos
   2. 在dos中測試

   node -v

   git --version

   cnpm -v

   截圖發出來

2. 架構

   vue-admin-template-master.zip

3. 啟動項目

   在終端中打開項目,并且為項目安裝依賴

   d:/briup > cd smart

   d:/briup/smart > cnpm install

   在windows10中，經常會由于系統安全，不允許我們在第三方的terminal中直接調用指令，是以需要在powershell中進行授權。具體參考如下：

   https://www.cnblogs.com/carriezhao/p/12618392.html

   d:/briup/smart > npm run dev

4. 熟悉項目結構

   node_modules node依賴的模闆，cnpm install，實際上就是将下載下傳的依賴安裝到這個目錄下。

   public

   index.html

   src 源碼

   layout 整個網頁的布局檔案

   icons 圖示

   router 路由 單頁面程式

   store 狀态機

   styles 樣式

   pages 自定義網頁（我們寫的網頁）

   utils 工具 ajax 、cookie…

   views 視圖，系統視圖

   App.vue

   main.js 入門檔案

   package.json 項目核心配置檔案

5. 添加頁面的流程

1. 在pages中添加一個vue頁面
Map.vue
  1) 模闆（html）
  2) js
  3) css
2. 将該網頁注冊到路由
src/router/index.js
           

1. 定制

   将模闆項目改成具有特色的項目

   src/settings.js

   sidebarLogo: true

   全局替換

   全國疫情可視化平台

   全國疫情可視化平台