后台管理系统

Vue Vue-loader Vuex Element-ui Axios Echarts

前端开发：PC端、移动端、小程序、后台管理页面

后端开发：java PHP python 、大数据、人工

1.项目搭建：

1. 在PHP study中导入数据库
2. 创建项目，vue-router、vuex
3. 删除不必要的文件
4. 下载axios ———npm i axios -s
5. 下载element ———vue add element
   element有很多组件可以直接复制代码
   —>选择import on demand按需导入(减少项目体积)
   —>zh-cn简体中文
   —>安装
6. 导入css
7. 导入iconfont图标 （直接用element里面的图标）
   用法 iconfont固定 后面是所选class名
   <i class="iconfont icon-icon--yes"> </i>
   8.后台服务：node.js服务、express、jwt(生成token)、mysql

2.路由搭建：

1. 页面布局配置，同级登录界面
2. view中创建文件夹(buju、login)和.vue文件，在route的index.js中创建路由对象
3. App.vue中使用 <router-view/>
4. 在buju中创建content、mymenu和index的.vue文件，并在buju的index中引入组件，使用组件。content中分为header和content2，并在content2中写路由出口router-view
5. 在views中创建首页、商品、规格、广告、订单等文件夹和.vue文件，在router的index中配置路径映射关系,在buju的组件下添加子组件，在myment中使用router-link加路径
   

3.导航折叠：

1. 在订单里面添加二级菜单，新建文件(订单列表和退货)，配置路径映射关系，在dingdan.vue里加路径出口router-view，在mymenu里添加样式（在element里面复制）
2. myment和content都用到变量iscollapse，在index里面定义变量，myment里父传子用props，content里点击修改父组件的变量，用$emit子传父，在index写方法。
3. content传变量，两个按钮同意点击事件，用v-if控制
   iscollapse以此来控制两个图标

4.静态布局：

在element里复制输入框、按钮、表格的代码

5.动态数据：

1. 新建文件夹server，index.js、router.js
2. 安装express ———npm i express -s
3. 安装mysql——npm i mysql -s
4. 运行index.js出现端口号（8989）
5. 复制mysql.js,复制router.js的路由接口，用http://localhost:8989/api/projectList测试数据是否导入
6. 新建文件夹api，index.js、base.js
7. 复制vue.config.js
8. 在main.js加东西
9. shangpin.vue写生命周期函数
10. api/index.js运行，npm run server，控制台显示…跨域成功
    
    11.根据state的data修改表格的prop

6.分页实现：

1.element的分页里复制代码
2.shangpin.vue中取数据中的页数和总数

7.页面查询：

8.页面添加：

1.新建add.vue，router的index里配置路径，加面包屑
2.添加按钮加router-link
3.form表单复制，

8.弹窗添加：

复制dialog对话框

9.上传图片：

1.复制element的upload
2.router.js写接口，安装multer，静态文件托管

10.富文本编辑：wangEditor

百度编辑、wangEditor
wangEditor使用步骤：安装 npm i wangeditor --save,
引入import E from ’ wangeditor’
使用（官网有使用方法）
编辑内容传给整个添加组件，

10.国际化：vuei18n

-----vuejs国际化的插件
安装：npm install vue-i18n
导入
使用方法在官网
element里按钮国际化，在element里面找国际化

11.登录：

1.路由拦截:
2.安装jsonwebtoken，生成token
3.安装jwt-decode 解析token
3.新建sercert.js,密钥,导出jwtSecert，在router.js中导入
4.base.js里配置接口路径，index.js里配置请求的方法

12.Echarts使用：

1.安装echarts
2.在mounted里面复制官网代码
3.修改初始化的实例this.$echarts.init

13.mock.js模拟数据：

独立的模块
1.安装 npm i mockjs -s
2.引入：node.js中 const Mock = require(‘mockjs’)
前端js import Mock from ‘mockjs’

vue-pdf： 在github中搜
安装----使用-----