Vue电商后台管理系统 ·

初试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函数（需要先挂载）

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

  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

插件：