practise vue shop front下載 - practise vue shop front原始碼下載

practise vue shop front

其他類別

1.0.0

下載

practise-vue-shop-front

介紹

跟著2019 黑馬前端element 課程學習的程式碼專案。

在食用本專案前，推薦先學習vue.js，這個東西是element UI 框架的學習門檻。切勿急功近利

本項目搭配後端Server專案索引：learnVue_shop 配對的伺服器API 項目

本專案使用的後台API 介面是洛天依保護協會提供的公用後台API 介面

黑馬前端官方課程地址：

前端專案網址：http://shop.liulongbin.top/

後端介面位址：https://www.liulongbin.top:8888/api/private/v1/

API 介面文件：連結：https://pan.baidu.com/s/1KJPfaFaPadW4JdGjCt54NQ 提取碼：mgbr

全套課程下載：連結：https://pan.baidu.com/s/1hBwZLR-Wbjt28YSEzVi6AQ 擷取碼：2urn

註：後端介面位址必須帶有token 才能正常發送和接收請求，請跟著專案課程了解學習

請不要亂刪數據，刪了請加回去，刪的時候請留一兩條在清單裡。特別是角色權限部分，刪光了權限資料那做到這部分的同學就沒法繼續做下去了另外給個提示，遇到沒有資料的情況，可以去到專案網站裡加一些資料進去.

鳴謝

b 站用戶: 洛天依保護協會提供的公用後台API 接口

使用者名稱: admin 密碼: 123456

洛天依保護協會的專案範例網址: http://gl.timemeetyou.com

萬一介面失效了或是用戶被刪了可以私聊其恢復資料庫

安裝

 # 克隆项目
git clone https://github.com/wangxinleo/learnVue_shop.git

# 进入项目目录
cd learnVue_shop

# 安装依赖
npm install

# 本地开发 启动项目
npm run serve

分支

master 分支為本專案原始碼分支
server 分支為專案編譯後的程式碼分支，且包含執行腳本

原始碼部署

 # 克隆项目
git clone https://github.com/wangxinleo/learnVue_shop.git

# 进入项目目录
cd learnVue_shop

# 切换到server分支
git checkout -b server origin/server

# 拉取server分支代码
git pull

# 安装依赖
npm install

# 源码部署
node ./app.js

本項目部分編碼優化

專案中各類文件依照目前網路公司的通用模組化習慣劃分成了6 個大模組，分別存放各類所屬文件

 - src //开发目录
  - asset // 存放静态文件
    - css
    - font
    - img
  - common // 公用js文件
  - network // api请求文件
    - goodsCom
    - home
    - login
    - order
    - report
    - rightsAndRoles
    - users
    - request . js // 封装axios请求
  - router // 动态路由
  - store // Vuex
  - view // 视图文件
  - App . vue
  - main - dev . js //用于开发环境的入口文件
  - main - prod . js //用于生产环境的入口文件
  - main . js // main模板文件

- . browserslistrc // 指定打包的代码对哪些浏览器支持
- . editorconfig // 代码规范
- . eslintrc . js // eslint配置文件
- babel . config . js // 插件配置
- package . json //项目信息文件
- vue . config . js //用户自定义webpack配置文件

本專案中的所有API 請求都封裝在network 資料夾下，不再在.vue 檔案中進行axios 請求，vue 中只處理返回數據，符合Vue 的封裝想法。

 // 以login.vue 为例
执行 login ( ) 方法
--> 到network/login下找到login请求
--> 引用 request.js 封装的axios 方法
--> 请求到数据返回到login.vue 中继续处理
--> 登陆成功

為什麼要這樣使用？例如後台API 介面臨時發生變化，我們只需要修改network 資料夾下的request.js 檔案的url 變量，即可全域變更API 接口，符合模組化的思想，更方便程式碼管理。也更方便API 方法的複用。

在user 模組中，我嘗試抽取了部分重複使用的元件變成子元件，加入了父子元件通訊和兄弟元件通訊的概念。這個在正常開發中非常多的用到，usersChildren 中的兄弟元件關係和userCildren 和Users 父子元件的通訊可以好好琢磨琢磨，下下功夫

 // 加入了$bus的应用，用于跨组件通信

// main.js
Vue . prototype . $bus = new Vue ( )

// usersChildren/usersFunc/addUserDialog.vue
this . $bus . $emit ( 'freshClick' ) //很像父子之间传值的方法

// Users.vue
this . $bus . $on ( 'freshClick' , ( ) => {
  console . log ( this )
  this . getUsersList ( )
} )

// 父子组件通信

// 子组件代码实例
< template >
    < div @ click = "open" > </ div >
< / template>

methods : {
   open ( ) {
        this . $emit ( 'showbox' , 'the msg' ) ; //触发showbox方法，'the msg'为向父组件传递的数据
    }
}

// 父组件代码实例
< child @ showbox = "toshow" : msg = "msg" > < / child > //监听子组件触发的showbox事件,然后调用toshow方法

methods: {
    toshow ( msg ) {
        this . msg = msg ;
    }
}

開發工具

下載地址：vscode

prettier
這個工具會自動為您格式化整理代碼， vscode 去插件商店下載【Prettier - Code formatter 】這個插件. 安裝完成後vscode 打開[文件]-->[首選項]-->[設定],找到json在設定頁右上角有個小圖示點選即可切換至json 設定模式，如果你有其他專案eslint 設定不想取代本規則，可以拷貝到【工作區】的設定檔下，就不用替換到【使用者】配置下了）拷貝下方json 到設定檔

{
  "[vue]" : {
    "editor.defaultFormatter" : " esbenp.prettier-vscode "
  },
  "editor.quickSuggestions" : {
    "strings" : true
  },
  "workbench.colorTheme" : " One Monokai " ,
  "editor.tabSize" : 2 ,
  "editor.detectIndentation" : false ,
  "emmet.triggerExpansionOnTab" : true ,
  "editor.formatOnSave" : true ,
  "javascript.format.enable" : true ,
  "stylelint.enable" : true ,
  "css.validate" : false ,
  "less.validate" : false ,
  "scss.validate" : false ,
  "stylelint.autoFixOnSave" : true ,
  "git.enableSmartCommit" : true ,
  "git.autofetch" : true ,
  "git.confirmSync" : false ,
  "[json]" : {
    "editor.defaultFormatter" : " esbenp.prettier-vscode "
  },
  "liveServer.settings.donotShowInfoMsg" : true ,
  "explorer.confirmDelete" : false ,
  "javascript.updateImportsOnFileMove.enabled" : " always " ,
  "typescript.updateImportsOnFileMove.enabled" : " always " ,
  "files.exclude" : {
    "**/.idea" : true
  },
  "editor.codeActionsOnSave" : {
    "source.fixAll.eslint" : true
  },
  "[javascript]" : {
    "editor.defaultFormatter" : " esbenp.prettier-vscode "
  },
  "[scss]" : {
    "editor.defaultFormatter" : " esbenp.prettier-vscode "
  },
  "[jsonc]" : {
    "editor.defaultFormatter" : " esbenp.prettier-vscode "
  }
}

stylelint
這個工具會自動格式化整理CSS、sass、less 程式碼，自動排序css 的順序vscode 需要去外掛程式商店下載【stylelint-plus】這個外掛具體的JSON 設定如下

{
  "stylelint.enable" : true ,
  "css.validate" : false ,
  "less.validate" : false ,
  "scss.validate" : false ,
  "stylelint.autoFixOnSave" : true
}