vue_shop

介绍

跟着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/1_-Ve1ceCsvPuXDtieeyVEA ，提取码是 q8ln

注：后端接口地址必须带有 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
}

其他插件

[Import Cost] 查看你引入的依赖模块大小

[Auto Close Tag] 自动补全 html 标签，如输入<a>将自动补全</a>

[Auto Rename Tag] 自动重命名 html 标签，如修改<a>为<b>，将自动修改结尾标签</a>为</b>

zhubincode/learnVue_shop

vue_shop

介绍

鸣谢

安装

分支

源码部署

本项目部分编码优化

开发工具