技術標籤：前端開發

該專案為移動端的瀏覽器網上商城開發（coderwhy老師的vue教程視訊中的專案），主要是記錄自己的開發過程。

一、建立專案（劃分目錄）

1、在VScode終端用Vue CLI3建立專案

npx vue create jelly-mall

如何安裝Vue CLI見我之前的部落格：

https://blog.csdn.net/Jelly_11/article/details/113389663

注意：專案名稱不可以有大寫字母。

在這裡我只選擇了基本的babel，其他的例如vue-router等用到時我再手動安裝。

2、建立好專案後，刪除一些預設內容

• 刪掉預設給出的HelloWord.vue和logo.png；
• 刪除App.vue中對HelloWord的引用及元件和樣式；
• 將public資料夾下的瀏覽器標籤圖示favicon.ico替換為我們的圖示。

3、劃分目錄
根據我們的專案，在src資料夾下新建一些資料夾，如下圖：

• assets中用於存放圖片img和樣式檔案css，css資料夾中有normalize.css檔案用來讓不同的瀏覽器在渲染網頁元素的時候預設樣式更統一（官網下載），reset.css用於去除預設樣式（網上可下載），base.css用於存放一些基礎的樣式。
• common中存放一些公共的js檔案，例如const.js（用來存放常量）和utils.js（用來存放公共函式）等。
• components
  中新建common（存放其他專案中也可能會用到的元件）和content（存放本專案中多個頁面會用到的元件）資料夾。
• views資料夾也是用來存放元件.vue的，主要是用來存放每個頁面自己的元件，根據我們的商城專案，主要有是4個頁面，分別是首頁home、分類category、購物車cart、我的profile。
• network中存放網路請求資料的相關程式碼。
• router中存放路由相關程式碼。
• store中存放vuex相關程式碼。

二、建立GitHub倉庫

在github上建立一個倉庫，名為jelly-mall，這裡不用選擇建立README和 .gitignore，因為腳手架為我們建立的專案中已經 有這兩個了。

建立好倉庫之後，複製我們的倉庫地址，然後回到VScode終端進入本地jelly-mall資料夾。

依次輸入2條命令（第一條命令的網址為剛剛複製的GitHub網址）：

git remote add origin https://github.com/jelly571/jelly-mall.git
git push -u origin master

注意：電腦上需要提前安裝好git，網上有很多教程，安裝很簡單，這裡就不贅述了。

這樣就實現了將本地的專案上傳到GitHub上，之後我們每寫完一部分功能的程式碼，就可以使用以下命令將更新的程式碼上傳GitHub。

git add .
git commit -m "新增xxx功能"
git push

三、配置別名和規範檔案

由於Vue CLI3隱藏了webpack配置檔案，我們在根目錄下可以建立vue.config.js檔案來修改配置，在vue.config.js中寫入如下程式碼，給資料夾路徑起別名，主要用於引用時可以簡化路徑。

//vue.config.js檔案

//@表示src資料夾
module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        'assets': '@/assets',
        'common': '@/common',
        'components': '@/components',
        'network': '@/network',
        'views': '@/views' 
      }
    }
  }
}

建立.editorconfig檔案寫入一些規範（在Vue CLI2中有的檔案，也可直接複製過來）

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

四、配置css檔案

1. 在base.css中引用normalize.css和reset.css，在App.vue中引用base.css從而將公共樣式與網頁構建聯絡。（index.html
   -> 打包的js檔案(main.js作為入口) -> App.vue）
2. 在base.css檔案中寫入一些公共樣式：
   公共樣式變數；
   去除預設樣式；
   設定字型、使用者選擇、去除高亮、字型顏色、寬度等；
   超連結樣式；
   解決浮動引起的高度塌陷以及外邊距重疊等。

//App.vue檔案

<style>
@import 'assets/css/base.css';
</style>

/*base.css檔案*/

/*引用normalize.css*/
/*normalize.css對瀏覽器預設樣式進行統一
reset.css去除瀏覽器預設樣式*/
@import "./normalize.css";
@import "./reset.css";

/*配置一些變數，用於樣式引用*/
/*:root -> 偽類選擇器：獲取根元素html*/
:root {
  --color-text: #666;
  --color-background: #fff;
  --color-high-text: #ff5777;
  --color-tint: #ff8189;/*背景顏色：導航等*/
  --font-size: 14px;
  --line-height: 1.5; 
}

/*去除預設樣式，其實有了reset.css可以省去這一步*/
*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  /*寬度和高度用來設定整個盒子可見框的大小（內容區+內邊距+邊框）*/
  box-sizing: border-box;
}

body {
  font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微軟雅黑",Arial,sans-serif;
  user-select: none;/*禁止使用者滑鼠在頁面上選中文字圖片等*/
  /*將預設的點選高亮設定為透明*/
  /*webkit是蘋果瀏覽器引擎，tap點選，highlight背景高亮，color顏色用數值調節*/
  -webkit-tab-hightlight-color: transparent;
  color: var(--color-text);
  width: 100vw;/* 100vw一個視口寬度 */
}

a {
  color: var(--color-text);
  text-decoration: none;/*文字修飾，去掉超連結下劃線*/
}

/*解決浮動引起的高度塌陷
.clearfix::after {
  content: '';
  display: block;
  clear: both;
  width: 0;
  height: 0;
  visibility: hidden;元素不在頁面中顯示，但仍佔據頁面位置
}*/

/*解決浮動引起的高度塌陷以及外邊距重疊*/
.clearfix::before,
.clearfix::after {
  content: '';
  display: table;
  clear: both;
}

/*針對IE低版本瀏覽器*/
.clearfix {
  /*zoom的作用是設定或檢索物件的縮放比例，
  zoom:1可以在低版本IE下觸發IE瀏覽器的haslayout，
  用於清除浮動，解決margin導致的重疊等問題*/
  zoom: 1;
}

/*設定導航navbar浮動*/
.left {
  float: left;
}

.right {
  float: right;
}

專案正在開發，部落格持續更新中……

接下來內容：

• 專案模組劃分：tabbar路由對映（準備單獨寫個部落格）
• 首頁開發：navbar的開發
• 首頁開發：網路資料請求
• 首頁開發：輪播圖
• 首頁開發：推薦資訊

附上效果圖：