# vue_shop

**Repository Path**: picky-xxx/vue_shop

## Basic Information

- **Project Name**: vue_shop
- **Description**: 初试Vue框架，熟悉elementui组件，了解webpack构建工具，使用脚手架打包上传。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2020-09-22
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue电商后台管理系统 · [![Gitee license](https://img.shields.io/github/license/observer-l/NFU-Guide-Map)](https://github.com/Observer-L/NFU-Guide-Map/blob/master/LICENSE) [![test](https://img.shields.io/badge/platform-VsCode-green)]() [![GitHub stars](https://img.shields.io/github/stars/observer-l/NFU-Guide-Map)](https://gitee.com/picky-xxx/flask_movie/stargazers)

**初试Vue框架，熟悉elementui组件，了解webpack构建工具，使用脚手架打包上传。**



项目开源，持续更新，欢迎 Star⭐️！

## Vue项目初始化

- 安装脚手架

  - 后面需要下载Node.js和Git

- 通过脚手架创建项目

  - vue ui

- 初始化远程仓库

  - 在Gitee中新建仓库

- 将本地项目托管到Github或Gitee中

  1. 第一个cmd输入

     - git config --global user.name "picky-xxx"

     - git config --global user.email "1119052606@qq.com"

  2. 在创建好的vue项目中打开cmd并输入

     - ~~git init~~（提交新项目时需要）
     - git status（查看状态）
     - git add .（注意有空格）
     - git commit -m "add files"
     - git status（再次查看状态，分支已干净）
     - git remote add origin https://gitee.com/picky-xxx/vue_shop.git（这部分不同仓库对应不同路径）
     - git push -u origin master

     

---

### 后台项目的环境安装配置

- 连接MySQL数据库
  - PHPstudy
- 安装Node.js环境
  - npm install（在API文件夹下）
  - node .\app.js

- 使用postman测试接口

---

### Git创建新分支

1. git status：查看项目状态，当分支干净时可以创建新的分支，写完代码后再提交，最后合并。
2. git branch：查看处于哪个分支
3. git checkout -b login（分支名）：创建新的分支
4. git branch：查看所有分支
5. git push -u origin login ：如果仓库中有此新分支则git push，没有则origin

---

### Git第一次提交新分支

**每次写完都要合并到master中上传，同时也要上传分支，好随时修改**

1. git status
2. git add .  ：不要忘了add后有空格，添加到缓存区
3. git commit -m "完成了xxx" ：提交并添加代码信息
4. git checkout master ：切换到master
5. git branch
6. git merge login ：把login合并到master
7. git push ：上传到仓库中
8. git checkout login 
9. git push -u origin login ：第一次上传到仓库的新分支login

---

### Git提交分支（提交此分支两次及以上）

1. git branch（看在不在目前写的分支上）
2. git add .  ：不要忘了add后有空格，添加到缓存区
3. git commit -m "完成了xxx" ：提交并添加代码信息
4. git push ：上传到仓库中
5. git checkout master
6. git merge login：合并分支到主分支
7. git branch：是否在master分支上
8. git push

---

### 随笔记录

- 脚手架使用3.6以上的版本

- 自定义代码片段

- /router/index.js：导入与路径有关的.vue

- main.js：导入外面的资源，类似于HTML的link

- element.js：导入elementui需要的组件

  - 可使用iconfont的图标，在官网添加到购物车后下载代码，导入font文件并在main.js中import

- 数据绑定：form表单中的 :model="loginForm" ，loginForm定义在data中

- 表单校验：:rules="xxxRules"，xxxRules定义在data中

- @事件=“方法名”

- ！== 、===

- 使用async await $http 请求路径后（具体请求地址由API文档规定），得到返回的相应数据

- :data=“数据源”，所需的所有数据

- Form表单中的prop=“需校验的字段名”，v-model=“绑定校验的字段名“

- Table中的prop=“API文档中规定的名字”

- 在函数中，scope.row是当前点击的结点的所有数据

- ref可以调用ui官方给的函数，this.$refs.treeRef.xxx函数（需要先挂载）

- 展开运算符`...`可以展开数组，把数组的每个数据拆开然后放进去

  ```vue
  const keys = [
  
      ...this.$refs.treeRef.getCheckedKeys(),
  
      ...this.$refs.treeRef.getHalfCheckedKeys()
  
     ]
  ```

- 需要用{{}}的就用{}，需要放置所有数据的（一般是{},{}）用[]



---

---

## 打开项目步骤

1. cmd中输入vue ui
2. 连接数据库
3. 在API文件中打开cmd输入node .\app.js
4. 在vue仪表盘中打开启动app打开项目



---

---

## 项目简要

### 项目文件简要

main.js：导入外部资源入口

index.js：导入vue文件，挂载路径定向

element.js：导入elementui所需的组件

Login.vue：登录页面

Home.vue：后台管理系统搭大框架

Users.vue：用户列表管理

---

### 项目数据简要

Users.vue：

- users：Url请求路径名
- userlist：返回的请求响应数据
- 

---

### 项目插件安装

依赖：

- vue-table-with-tree-grid 0.2.4

插件：